- React state :상태는 useState를 통해 관리되며, 상태가 변경될 때마다 컴포넌트가 리렌더링 된다. - 일반 변수 :일반 변수는 컴포넌트가 렌더링될 때마다 초기화되며, 상태와 다르게 리렌더링 후에 이전 값을 기억하지 않는다. react state를 의존성 배열에 넣으면,useEffect는 의존성 배열에 명시된 값이 변경될 때마다 실행되므로,해당 상태가 업데이트될 때만 useEffect가 실행된다.하지만 이때 다시 상태를 업데이트하지 않는다면 무한 루프가 발생하지 않는다.즉, 상태가 변경되면 useEffect가 실행되고, 상태가 변경되지 않는다면 다음 렌더링에서는 useEffect가 실행되지 않는다. 일반 변수를 의존성 배열에 넣으면,컴포넌트가 다시 렌더링될 때마다 그 값이 새로 초기화되고..

이제 우리는 리액트 동작 원리를 이해해야 한다.리액트 프레임워크를 구성하는 기본 3요소는 가상 DOM, JSX 구문, 컴포넌트이다.가장 처음으로 가상 DOM에 관하여 알아보도록 하겠다. 가상 DOM에 관하여 알아보기 위하여 프로젝트를 새로 하나 만들어주겠다.가장 최상위 디렉토리인 rcp 바로 아래에 ch02 폴더를 생성해준다.그리고 ch02 폴더 안에 ch02_1라는 이름의 리액트 프로젝트를 만들어준다. mkdir ch02cd ch02npx create-react-app ch02_1 --template typescript 그리고 저번 프로젝트에서 설정해뒀던 .prettierrc.js 파일과 만들어둔 가짜 데이터들을 가져올 것이다하나하나 다시 타이핑을 치는 것은 너무 비생산적이다... cp -r ../....

3. 가짜 데이터 만들기 개발을 하다보면 실제 데이터가 필요할 때가 있다.하지만, 실제 데이터를 얻기 어려울 때는 그럴 듯한 가짜 데이터를 임시로 사용해야 한다.이번에는 외부 패키지 설치를 통하여 가짜 데이터를 만들어볼 것이다. npm i 또는 npm install을 통하여 프로젝트에 필요한 다양한 오픈소스 패키지를 설치할 수 있다.원래는 npx를 사용하려고 했으나, npx를 사용하니 에러가 떴다.여기서는 npx를 사용할 수 없는 이유가 무엇인지 궁금하여 검색을 해보았다. npx는 주로 CLI(Command-Line Interface) 기반의 패키지를 실행하기 위하여 사용된다고 한다.CLI 패키지는 명령줄에서 실행할 수 있는 명령어를 제공하는데, npx는 이러한 명령어를 실행할 수 있게 해준다.반면에 l..

2. React 프로젝트 만들기 - 2 - 개발 모드로 실행하기 이제 개발 모드를 실행해보도록 하겠다.npm run start(또는 npm start) 명령어를 사용하여 웹 브라우저에서 리액트 프로젝트를 실행시킨다.개발 모드의 경우 서버를 따로 켜지 않아도 프로젝트 실행이 가능하다.  여기서 하나 알아둬야 할 것은, 개발 모드의 경우 웹팩이 서버로 동작을 한다는 것이다.npm run start 명령으로 동작한 react-scripts start가 내부적으로 웹팩을 서버 형태로 구동한다.그렇기 때문에 npm run build와 달리 npm run start는 명령이 종료되지 않고 계속 동작한다.  웹팩 서버는 프로젝트의 파일들을 빌드하여 번들 파일로 만든 다음, 이를 반영한 index.html 파일을 생성..

2. React 프로젝트 만들기 드디어 React 프로젝트를 하나 생성했다.기존의 rcp - ch01 폴더 내에 ch01_5라는 프로젝트명으로 프로젝트를 생성했다.앞서 설명했듯이 npm보다 npx가 낫다고 판단을 하여 npx를 사용하여 프로젝트를 생성했다. npx create-react-app ch01_5 --template typescript React 프로젝트는 기본적으로 Node.js 프로젝트이다.모든 Node.js 프로젝트는 '루트 디렉토리(ch01_5)'에 항상 package.json 파일이 있다. 이제 프로젝트를 실행해야 하는데, 실행시키기 위해서는 터미널에 명령어를 입력해야 한다.package.json 폴더 내에 "script" 항목에서 이와 관련된 명령어들을 확인할 수 있다. npm run..

이번에는 React 프로젝트를 만드는 과정에서 필요한 개념들을 알아보도록 하겠다.예전부터 나는 이 부분에 대한 지식이 부족했기 때문에 한 번 자세히 알아보려고 한다. 1. npm / npx 프로그램 알아보기 npx, npm 프로그램 : Node.js 환경에서 패키지 관리를 위해서 사용하는 도구이다. npm (Node Package Manager)npm은 Node.js의 패키지 관리자이다.이를 통하여 개발자는 다양한 오픈 소스 라이브러리를 설치하고 관리할 수 있다.npm은 패키지를 로컬 프로젝트나 전역으로 설치할 수 있다.예시)1. 로컬 설치 : 특정 프로젝트에만 패키지를 설치한다.npm install lodash=> 이 명령어는 lodash 패키지를 현재 디렉토리에 있는 node_modules 폴더에 설..