React Project 생성

1. Yarn을 이용하는 방법

• 프로젝트 생성 명령어: yarn create react-app <생성할 프로젝트 이름>

 

2. npm을 이용하는 방법

• 프로젝트 생성 명령어: npm init react-app <생성할 프로젝트이름>

위 두개의 옵션 명령어를 통해서 프로젝트를 위한 웹팩, 바벨 및 설정 과정을 생략하고 react 프로젝트를 쉽게 생성할 수 있다.

 

3. 실행방법

• 생성된 디렉토리로 이동 후 yarn start 또는 npm start 명령어를 통해서 react 앱을 실행시킨다.

 

생성된 프로젝트에서 src/App.js를 보면 function 키워드를 사용하여 컴포넌트를 만드는 것을 볼 수 있는데 이를 그 유명한 "함수형 컴포넌트"라고 불린다.

함수에서 내용을 반환하고 있는 내용을 나타낸다. HTML 같지만 이는 문자열 템플릿도 아닌 JSX라고 불리운다.

 

4. 참고

• 리액트 컴포넌트에서(Vue에서도 마찬가지지만) div 같은 요소로 감싸줘야하는 이유는 Virtual DOM에서 컴포넌트의 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져 있어야한다는 규칙 때문