해당 포스트는 코드아카데미의 React 101 강의의 필기입니다.
Why React?
- 속도: 복잡한 로직을 다루면서도 빠르게 반응한다.
- 모듈: 재사용 가능한 작은 파일들을 작성, 유지보수에 유리하다.
- 데이터의 변화를 다루는데에 유리하다.
- 유연하다, 웹앱 이외의 프로젝트에도 사용 가능.
- 인기가 많아 커뮤니티가 크게 형성되어있고 취업에도 유리하다.
JSX
자바스크립트도 아니고 HTML도 아니어보이는 이 문법은 JSX.
const h1 = <h1>Hello world</h1>;JSX
자바스크립트의 문법 확장 버젼
웹브라우저가 바로 읽을 수는 없기 때문에 compile 과정이 필요함
JSX와 자바스크립트
JSX 요소는 자바스크립트 문법에 맞추어서 변수, 배열, 객체에 저장될 수 있음
const navBar = <nav>I am a nav bar</nav>;
const myTeam = {
center: <li>Benzo Walli</li>,
powerForward: <li>Rasha Loa</li>,
smallForward: <li>Tayshaun Dasmoto</li>,
shootingGuard: <li>Colmar Cumberbatch</li>,
pointGuard: <li>Femi Billon</li>
};
JSX 요소의 속성
JSX요소도 HTML요소와 같이 속성을 가질 수 있음
const p1 = <p id="large">foo</p>
const p2 = <p id="small">bar</p>중첩된 JSX 요소
JSX요소를 중첩시킬 수 있음. 한 줄 이상의 JSX 요소가 있을 경우엔 ()로 감싼다.
중첩된 JSX요소들 또한 변수에 넣을 수 있다
const myDiv = (
<div>
<h1>Hello world</h1>
</div>
);항상 하나의 최상위 요소를 가져야함
나쁜 예시 → Error!
const blog = (
<img src="pics/192940u73.jpg" />
<h1>
Welcome to Dan's Blog!
</h1>
<article>
Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
</article>
);좋은 예시 : div로 감싸주어서 최상위 요소가 div 하나가 되었다
const blog = (
<div>
<img src="pics/192940u73.jpg" />
<h1>
Welcome to Dan's Blog!
</h1>
<article>
Wow I had the tastiest sandwich today. I <strong>literally</strong> almost freaked out.
</article>
</div>
);JSX Rendering
렌더링 = 화면에 나타내기
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>Hello world</h1>, document.getElementById('app'));ReactDOM
자바스크립트 라이브러리의 이름. 리액트에서 DOM을 다루기 위한 메소드들이 있음.
ReactDOM.render()
ReactDOM의 메소드. JSX를 렌더링 하기 위한 가장 흔한 방법. JSX을 가져다가 DOM nodes를 만들고 이를 DOM에 붙임.
ReactDOM.recder(렌더링하고 싶은 JSX 표현식, 렌더링할 위치);
첫 번쨰 인자는 렌더링할 대상(JSX요소, 변수, 함수 모두 가능), 두 번째 인자는 렌더링할 위치 (.appendChild 생각하면 됨)
🌸 Virtual DOM
JSX를 렌더링 하면, 이전 렌더링과 다른 것만 렌더링함 → Virtual DOM 덕분
DOM 조작은 동적 웹의 핵심이지만 다른 자바스크립트 동작보다 많이 느림.
심지어 대부분의 JS 프레임워크는 DOM을 필요 이상으로 업데이트함.
예) 10개의 아이템이 있는 리스트에서 한 아이템을 체크할 경우, 대부분의 프레임워크에선 리스트 전체를 업데이트함.
이를 해결하기 위해 리액트는 Virtual DOM 이라는 것을 도입하였음.
모든 DOM 객체에 더 가볍고, 화면에 출력되지 않는 Virtual DOM 객체를 둠.
Virtual DOM은 렌더링되지 않으니까 훨씬 빠르게 조작할 수 있음.
우리가 JSX 객체를 렌더링 할 때 일어나는 과정
1. Virtual DOM 전체가 업데이트 됨 (비효율적으로 보이지만 가볍고 빠르기 떄문에 걱정 없음)
2. 리액트는 기존 DOM과 새로 업데이트된 Virtual DOM을 비교하여 정확히 어디에 변화가 일어났는지 판단 = diffing
3. 변화가 일어난 부분만 실제 DOM에 업데이트함
4. 우리가 보는 렌더링 된 화면에 변화가 일어남
