TIL # 37 (React intro 4)

1. React. Why? What?

• Application의 발전
• 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리

2. CRA

• Node.js & npm

• Settings

  1) node-modules - package.json - .gitignore

node-modules: CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
package.json: CRA 기본 패키지 외 추가로 설치된 라이브러리(이름, 버전)이 기록되는 파일
.gitignore: .gitignore 파일에 github 에 올리고 싶지 않은 폴더와 파일을 작성할 수 있다.

2) `index.html` - `index.js` - `App.js`

index.html: <div id="root"></div> 하나의 파일이 있다.
index.js: ReactDOM.render 함수의 인자는 두개. 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트, 두번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치 ReactDOM.render( <App /> , document.getElementById('root'))
App.js: 현재 화면에 보여지고 있는 초기 컴포넌트.

:: 기타 폴더 구성

1) public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리 (추후 세션을 통해 다룰 예정)

2) src 폴더

• components - 공통 컴포넌트 관리
• pages - 페이지 단위의 컴포넌트 폴더로 구성
  • Login - Login.js, Login.scss
  • Main- Main.js, Main.scss
• styles 폴더
  • reset.scss - css 초기화
  • commom.scss - 공통으로 사용하는 css 속성 정의 (ex. font-family, theme color)

3. Component & JSX

• Component - 정의 / 종류 / 특징
• JSX - 정의 / 특징