[React] 리액트 기본 사용 구조

회사 프로젝트 상 리액트의 구조를 대략적으로는 파악해야 할 것같아 개인적으로 공부한 부분들을 아래 정리한다

설치 및 앱 생성

리액트 공식페이지 - ‘새로운 리액트 앱 만들기’ 탭 클릭
Create React 하단을 보면 현재(2023.06.10) 기준 Node 14.0.0 이상버전과 npm 5.6 이상 버전이 필요하다고 함.
- 미설치 되어있을 시 nodejs.org 에 들어가 필요버전 설치
- 설치 후 터미널에 node -v / npm -v 확인해서 잘 뜨면 설치 완료
버전 아래 쓰여있는 터미널 명령어로 리액트 앱 생성
(나의 경우 프로젝트는 이미 생성이 되어있기에 위 설치단계에서 3번은 하지 않았음)
```
npx create-react-app (생성 패키지 폴더명)
cd (상기 폴더명)
npm start 
```
프로젝트 셋팅
프로젝트의 원활한 사용을 위해 yarn 명령어가 필요 해 위에서 설치한 npm을 통해 yarn 설치를 했다. 참고로 yarn은 자바스크립트 패키지 매니저이다.
- npm install -g yarn
프로젝트의 필요 패키지들을 다운받는다
- ```yarn install``

구조

나의경우는 타입스크립트 기반의 프로젝트라 파일타입이 tsx이다. 다만 기반적인 이해를 위해서 블로그 정리는 더 많이 쓰이는 js 기준으로 로 기록하려한다. 만약 정리하는 도중에 오락가락하더라도 감안해서 이해하면 될것같다.

index.js파일
- React와 ReactDOM가 import 되어져있다. React는 리액트 사용 기능 전반적인것. ReactDOM은 리액트와 브라우저돔을 연결시켜주는 역할.
- 기본적인 css파일과 앱 컨포넌트도 임포트 되어 있다.
- import 구문아래 ReactDOM.render()이 선언되어 있고, 원하는 컴포넌트를 렌더링 할 수 있다.
  - 공식문서 참조결과 18버전 이전에는 ReactDOM.render (element, container[, callback]) 형식으로 사용, 18버전 이후에는 container[, callback])를 매개변수로 넣어주는것이 아니라 ReactDOM.createRoot()로 따로 지정해주고, ReactDOM.render(element)도 따로 한다고 한다.
- element는 <React.StraicMode> <App /> </React.StraicMode> 와 같이 스트릭모드로 감싸져있는데 스트릭모드란 렌더링되지않고 자손들에게 부가적인 검사와 경고를 활성화 한다고 한다. 프로덕션 빌드에서는 영향을 끼치지않고 개발모드에서만 활성화 됨.
- 위 목적이기 때문에 스트릭 모드가 아니어도 당연히 작동 가능하다
public/index.html
- createRoot에서 선언해준(또는 18버전 이전 render에서 콘테이너로 지정한) root는 public 폴도 속 html 파일안에 선언되어 있다. 해당 구역을 컴포넌트로 사용해서 이후 구현되는 부분들을 구역 안에 넣어준다.
App.js
- index.js에서 import하고 렌더 지정해준 앱 컨포넌트.
- return 값으로는 jsx 타입이 들어가야 함. js를 확장한 문법. html과 비슷하나 상이한점이 있으니 참고

IM

설치 및 앱 생성

프로젝트 셋팅

구조