인프런 [실전 리액트 프로그래밍] 강의를 듣고 공부한 내용을 정리합니다!
리액트란 무엇인가
- 자동 업데이트 UI
- UI = render(state)
- render 함수는 순수 함수로 작성
- state는 불변 변수로 관리
- 가상 돔(virtual DOM)
리액트 개발환경 직접 구축하기
- react.development.js / react-- dom.development.js 이용하여 직접 구축
React.createElement()를 사용하여 컴포넌트를 생성ReactDom.render()로 컴포넌트 렌더링
바벨 사용해보기
- js 코드 변환 컴파일러
리액트에서 jsx 문법을 사용하기 위해 필요 - babel설치 -> npm 이용 -> package.json 필요
npm init -y으로 npm을 설치할 수 있지만.. 나는 yarn을 더 선호하기 때문에yarn init -y으로 해 보았다.
- 바벨 패키지 설치
yarn add @babel/core @babel/cli @babel/preset-react- 컴파일
yarn babel --watch [dir] --out-dir [out dir] --presets @babel/preset-react웹팩 사용해보기
- 다양한 기능 제공 (파일 이름에 해시값 추가, 사용되지 않은 코드 제거, js 압축, js에서 css,json 등 모듈처럼 불러오기, 환경변수 주입)
- 주된 이유 : 모듈 시스템(ESM, commonJS) 이용
- 웹팩을 이용해서 예전 버전 브라우저도 모두 호환되도록 함
- 웹팩이 만들어준 js 파일을 html에 포함시킴
Kookmin Univ. CS