➰ 리액트가 번들링이 필요한 이유
리액트는 프론트엔드 라이브러리로서 최소한의 기능을 제공하고자 가볍게 만들어졌지만,
개발자의 다양한 니즈를 충족시키기 위해 더 많은 라이브러리를 필수로 사용해야 했고
개발자가 필요한 라이브러리를 골라서 번들링 할 수 있는 웹팩이 필요하게 되었다.
🏁 리액트에 꼭 필요한 라이브러리
➰ react, react-dom
리액트 컴포넌트와 Hooks, 라이프 사이클에 대한 정보가 모두 들어있는 리액트와
이 리액트 코드를 브라우저에 보여줄 수 있는 react-dom 은 필수이다!
➰ babel
브라우저에서는 Javascript는 읽을 수 있지만 React 의 JSX는 읽을 수 없다.
근데 여지껏 어떻게 보였지?
⇒ create-react-app 에 포함되어 있는 babel이 jsx를 js로 변경해줘서 번들링 해줬기 때문!
babel은 JSX를 Javascript 로 변경해서 entry에서 불러올 수 있게 만들어줬기 때문에 로더 의 일종으로 볼 수 있다.
➰ css-loader
create-react-app 으로 만들어진 애플리케이션을 보면 import 'aaa.css' 처럼 입력해도 CSS 가 적용됐다. 이는 css-loader가 필요하다는 것을 알 수 있다.
🏁 리액트에 도움이 되는 라이브러리
➰ react-hot-loader
react-hot-loader는 webpack-dev-server 처럼 저장할 때 마다 변경사항을 개발 환경에 적용해주는 라이브러리이다.
추가적인 특징이 있다면 리액트 상태를 유지시켜준다.
➰ eslint
Javascript로 개발 시 자주 접하는 에러를 방지하기 위한 린터이다.
eslint 역시 많은 config 와 plugin이 있는데,
이를 잘 조합하면 리액트에서 자주 접하는 에러를 미리 발견하는데 도움이 된다.
➰ prettier
Javascript로 개발 시 통일성있게 코드 형식을 맞출 수 있게 도와주는 툴
eslint 와 조합해서 통일된 코드 형식까지 강요할 수 있다.
