🏰 에필로그
React 로 프로젝트를 마치고 코드스테이츠 수료를 완료한 지금, Vanilla JS 대비 React를 사용하며 개인적으로 좋았던 점을 생각해보았다.
- 데이터에 방향성이 생겨서, 데이터 흐름이 예측 가능해진다.
- 목업페이지를 만들고 UI에 컴포넌트를 매핑하니, 머릿 속에서 각 컴포넌트들의 상호작용이 더욱 직관적으로 이해가 된다.
- 매번 돔조작을 할 필요가 없으니, 시간이 덜 든다. html 태그 생성, 라이프사이클 메소드 등.
- React 생태계가 발달되어 있어, 관련 라이브러리를 조합해서 사용하기가 수월하다. Typescript, Redux 등.
- JSX를 비롯하여 ES6 문법도 Babel 을 통해 ES5 로 컴파일링되어 각종 브라우저에 대응하기 편리하다. 이건 Babel 의 역할이지만,
create-react-app 의 경우 Webpack, Babel 이 올인원으로 설치되어 build 작업까지 간편하게 처리한다.
오늘부터는 Udemy 에서 수강했던 수업을 다시 복습하면서 Javascript 와 React 기초 동작 원리에 대한 지식을 공고히 하려고 한다. 공부하면서 요약 정리한 내용을 이번 시리즈에 담아본다.
🔗 강의 정보: Modern React with Redux by Stephen Grider
💡 React Component
JSX를 반환하는 plain javascript function. 두 가지 일을 하는데,
1) App component 로 하여금 유저 이벤트를 핸들링하고
2) JSX로 하여금 리액트가 스크린에 어떤 컨텐트를 보여줄지 지시한다.
💡 React가 JSX를 어떻게 핸들링할까?
1) return 문의 div 를 만나면 묻는다.
2) is this a DOM element?
3) if yes, OK, show a div on the screen to the user.
4) if no - it is a component, then call the component function and inspect all the JSX we get back.
💡 어떻게 브라우저 화면에 내용들이 나타날까?
1) browser 가 http request 를 보낸다.
2) server 가 index.html 를 response 한다.
3) browser 가 index.html 을 로딩하고, 그 안에 script 태그를 파싱한다. 다시 http request 를 보낸다.
4) server 가 bundle.js 를 response 한다.
💡 React VS ReactDOM
리액트를 다룰 때, 실제로 우리는 2개의 리액트 라이브러리를 다룬다. 리액트와 리액트 돔.
- React: "Reconciler". Knows how to work with components. how to call component function, how to get back JSX, decide weather to call html elements or to call some other component functions.
- ReactDOM: "Renderer". Knows how to take instructions on what we want to show and turn it into HTML. 실제로 HTML 로 바꿔서 DOM에 붙이는 역할.
💡 ES2015 Modules VS CommonJS Modules
파일들 간 코드들이 어떻게 쉐어링되어야 하는지 명시한 모듈시스템
- ES2015 Molues: "import" ES2015 import statement
- CommonJS Modules: "require" CommonJS import statement
💡 Babel
- 브라우저는 JSX 를 이해하지 못하고, ES2015 를 이해하지 못할 수도 있다.
- 배블(Babel) 이 ES5 언어로 변환하는 역할을 한다.
// before Babel
return <div>Hi!</div>
// after Babel
return React.createElement("div", null, "Hi!"); 