1. 코드 이해하기
(1) 번들러
import 구문은 원래 브라우저에는 없던 기능인데, 브라우저가 아닌 환경에서 js를 실행할 수 있도록 node.js에서 지원해주는 기능이다.
이러한 기능을 브라우저에서도 사용할 수 있게 번들러를 사용하는데, 번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐 하나의 파일을 생성해준다.
이 책의 프로젝트에서는 src/index.js로 필요한 파일들을 다 불러서 번들링한다.
리액트 프로젝트에서 번들러로 주로 웹팩을 사용한다.
svg, css 파일을 불러오는 것은 웹팩의 로더라는 기능이 담당하는 것이다.
웹팩의 로더 같은 것도 원래 직접 설치해야 하는데, create react-app 명령어가 알아서 해줬기 때문에 따로 설정할 필요가 없다.
(2) 함수형 컴포넌트
App이라는 컴포넌트를 만드는 코드이다.
function 이라는 키워드를 이용하여 컴포넌트를 만들었다 -> 함수형 컴포넌트
반환하는 값이 html같지만 이러한 코드를 JSX라고 한다.
2. JSX
jsx 코드는 브라우저에서 실행되기 전에 번들링 되는 과정에서 바벨을 사용해서 일반 js 코드로 변환된다.
(1) JSX 장점
일반 js 코드만 사용하면 컴포넌트를 렌더링 할 때 마다 매번 React.createElement() 함수를 사용해야 하는데 JSX를 쓰면 더 간단하다.
우리가 아는 HTML 태그를 쓸 수 있다.
(2) JSX 문법
1. 컴포넌트의 여러 요소들은 하나의 부모요소로 감싸져야 한다.
-> Virtual Dom에서 컴포넌트 변화를 찾아낼때, 컴포넌트 내부는 하나의 DOM 트리로 구성되어있어야 효율적으로 비교할 수 있기 때문이다.
2. JavaScript 표현
js표현식을 {}로 감싸면 된다.
ES6의 let, const
3. 조건문
jsx내부의 js표현식에서는 if문을 사용할 수 ❌
조건문을 쓰고 싶다면, jsx 외부에서 if문을 사용하거나 {}안에서 삼항 연산자를 사용.
4. class X className O
html에서의 class는 jsx에서 className이다.
5. 어떤 태그든 항상 닫아주기
6. jsx 내부 주석은 {/* */} 혹은 //
