0. 리액트의 탄생
이게 우리가 알고 있는 DOM을 다루는 방법은 DOM Selector API를 사용해 특정 DOM을 선택한 뒤, 이벤트리스너를 통해 변화를 주도록 설정했다.
하지만 이러한 방식은 규모가 커짐에 따라 코드가 난잡해지기 쉽다.
리액트는 이러한 문제를 특별한 발상으로 해결했다.
다 날려버리고 처음부터 모든걸 새로 만들어 보여주자면 어떨까?
어떤한 상태가 바뀌었을 때, 상태에 따라 DOM을 어떻게 업데이트할지 규칙을 정하는게 아니라 고민없이 그냥 새로 보여주겠다는 말이다.
하지만, 새로 만든다는건 그만큼 다시 렌더링해야할 것도 많기에 느릴게 뻔하다.
이 또한 리액트는 Virtual DOM 이라는 것을 사용하여 해결했다.
Virtual DOM은 브라우저에서 실제로 보여지는 DOM이 아닌 메모리에 가상으로 존재하는 DOM 으로써 단순히 JavaScript 객체이기 때문에 작동성능이 실제로 브라우저에서 DOM을 보여주는 것 보다 속도가 훨씬 빠르다.
상태가 업데이트 된다면, 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해 렌더링하고, 효율적인 비교 알고리즘을 통해 브라우저에 보여지고 있는 DOM과 비교후 차이를 감지하여 실제 DOM에 패치시켜준다.
업데이트를 어떻게 할 지 고민하지 않게 해주는데에는 이러한 비교, 감지, 패치를 리액트가 자동으로 해줌에 있어서 가능한 것이다.
1. 리액트의 기본, 컴포넌트
-
리액트에서 화면의 요소를 구분할 때 '컴포넌트'라는 단위를 사용한다.
-
이는 웹을 이루는 가장 작은 조각이라고 할 수 있다.
2. 효율성
JSX는 JavaScript의 확장 문법이다.
JSX를 처음 접했을 때 html과 js를 js공간에서 자유자제로 다룰 수 있는 걸 보고 놀라웠다.
아니나 다를까 JSX는 JavaScript XML의 약자였다.
다룰때는 요런식으로 다룬다.
const element = <h1 id="greet">Hello, world</h1>;React에서 JSX사용이 필수는 아니지만, 대분의 사람은 js코드 안에서 UI관련 작업을 할 때 시각적으로 더 도움이 된다고 생각한다고 한다.
React에서 JSX를 사용하지 않고 위의 element와 같은걸 선언 하려면 다음과 같이 작성해야한다.
const element = React.createElement("h1", {id: "greet"}, "Hello World");보기도 불편하고, 정말 끔찍하다
3. element rendering
요소를 만들었으면 그걸 html로 렌더링 해야지 화면에 보이는게 당연하다.
그렇다면 어떻게 렌더링 해야할까?
구문과 사용법은 다음과 같다.
| 구문 | 사용법 |
|---|---|
| render(element, container[, callback]) | ReactDOM.render(요소, 요소를 넣을 상자) |
<body>
<div id="root"></div>
</body>const Element = () => {
return (
<div>
<h1>Hello world1</h1>
<h2>Hello world2</h1>
</div>
);
};
ReactDOM.render(<Element />, root)
특징을 보자
3.1 render 함수 요소를 전달할 때 특징
- <함수명 />
- <함수명></함수명>
- 함수명()
함수의 리턴값으로 이용된다.
단순히 변수나 상수를 전달할 때는 이름만 전달하면 된다.
3.2 Fragment
불필요한 div로 감싸는 걸 원하지 않는다면, 리액트의 Fragment를 사용하면 된다.
function App() {
return (
<>
<Hello />
</>
);
}빈 태그는 브라우저 상에서 별로의 엘리먼트로 나타나지 않는다.
3.3 요소의 특징
- 요소는 불변 객체이다.
- 요소를 보면 div박스로 묶어서 JSX문법으로 작성된 html을 return한걸 볼 수 있다. JSX문법은 무조건 하나의 부모로 이루어져야 하는 규칙 때문이다. div를 작성하지 않을 시 다음과 같은 오류가 뜬다.
