사전지식

1. Node.js에서는 import가 아닌 require라는 구문으로 패키지를 불러올 수 있다.
2. 1.번의 기능을 브라우저에서도 사용하기 위해 번들러(bundler)를 사용한다. ex)웹팩, Parcel, browserify
3. 리액트 프로젝트에서는 주로 웹팩을 사용하는 추세이다.
   1. 이유 : 편의성과 확장성이 다른 도구보다 뛰어나기 때문
4. 번들러 도구를 사용하면 import(또는 require)로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다. 또 최적화 과정에서 여러 개의 파일로 분리 될 수 도 있다.
5. 웹팩을 사용하면 SVG파일과 CSS파일도 불러와서 사용할 수 있다. 이 파일들을 불러오는 것은 웹팩의 로더(loader)라는 기능이 담당
6. 웹팩의 로더는 원래 직접 설치하고 설정해야 하지만 리액트 프로젝트를 만들 때 사용했던 create-react-app이 번거로운 작업을 모두 대신해 주기 때문에 별도의 설정을 할 필요가 없다.

시작

JSX는 자바스크립트 문법인가요?

JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.

장점

1. 보기 쉽고 익숙하다
2. 더욱 높은 활용도

ReactDom.render은 무엇인가요?

이 코드는 컴포넌트를 페이지에 렌더링하는 역할을 하며, react-dom 모듈을 불러와 사용할 수 있다.

이 함수의 첫 번째 파라미터에는 페이지에 렌더링할 내용을 JSX 형태로 작성하고, 두 번째 파라미터에는 해당 JSX를 렌더링할 document 내부 요소를 설정한다.

React.StrictMode는 무엇인가요?

React.StrictMode는 리액트 프로젝트에서 리액트의 레거시 기능들을 사용하지 못하게 하는 기능이다.

이를 사용하면 문자열 ref, componentWillMount 등 나중에는 완전히 사라지게 될 옛날 기능을 사용했을 때 경고를 출력한다.