react38 [React] 틱택토 게임을 통해 개념 다지기 목차 간단한 틱택토 게임 모습 코드 참고https://github.com/sins051301/TIC_TAC_TO_GAME/tree/sucess/src TIC_TAC_TO_GAME/src at sucess · sins051301/TIC_TAC_TO_GAMEContribute to sins051301/TIC_TAC_TO_GAME development by creating an account on GitHub.github.com코드는 틱택토게임 폴더를 확인하면 된다. 알아두면 좋을것 같은 부분을 설명하고자 한다. 스프레드 연산자를 활용한 접근function deriveGameBoard(gameTurns) { //스프레드 연산자를 통해 이중 배열을 복사하는 방식 //기존 배열을 복사해준 뒤 일부만 변.. 2024. 6. 28. [React] 효율적인 코드 작성을 위한 개념 목차 Fragment자바스크립트는 한 값만 반환이 가능하기 때문에 return할때 묶어주어야 한다.그렇게 되면 묶기위해 불필요한 div를 써야하는데 그 대신 react의 fragment를 사용할 수 있다. import { Fragment } from "react";import ButtonList from "./ButtonList";function Lecture2() { return ( hello world dkdk );}export default Lecture2; 아래 코드를 쓰면 fragment 조차 사용하지 않아도 된다.import ButtonList from "./ButtonList";function Lecture2() { return ( hel.. 2024. 6. 26. [React] 주요 개념 알아보기 목차 index.js 리액트 앱의 진입점 커스텀 컴포넌트 규칙컴포넌트 이름은 대문자로 시작해야 한다.->다른 개발자가 만든 커스텀 컴포넌트와 리액트 내장된 컴포넌트를 구분을 하기 위해서이다. 동적인 값 출력하기import React from "react";const greetArray = ["hello", "hi", "okay"];function getRandomInt(num) { let newNumber= Math.floor(Math.random() * num) ; return newNumber;}//이런식으로 중괄호에 넣어주면 된다.function Lecture1() { return {greetArray[getRandomInt(3)]};}export default Lecture1; 동적.. 2024. 6. 21. 리액트: build process가 필요한 이유 리액트 project -> build process즉 작성한 코드가 브라우저에서 바로 시작되는 것이 아닌 내부적으로 코드가 수정된다. buile process 필요 이유1. 처리되지 않은 리액트 코드는 브라우저에서 실행할 수가 없기 때문에 필요하다. 즉 jsx문법 -> 표준 js문법 으로 바꾸어주어야 함 2. 작성한 코드가 간소화되지 않았기 때문이다. +++++build process 기능import App from './App'; 이런식으로 원래는 './App.js' 입력해야 했으나 확장자를 빼도 알아서 buildprocess가 추적해준다. 2024. 6. 20. 이전 1 ··· 6 7 8 9 10 다음 728x90
