-
React #2. 리액트의 컴포넌트 이해하기프론트/React 2024. 8. 3. 22:12
기존의 바닐라 JS 와 HTML 은 동적인 부분인 자바스크립트와 정적인 HTML 태그로 이루어져서 분리되어있는 구조이다. 이렇게 되면 span 과 button 을 재사용하려면 코드를 복사 붙여넣기해야한다. 이는 코드를 유지보수가 힘들게 하고 아래의 코드에서는 id 와 class 이름을 다 다르게 해줘야해서 번거롭게 btn1 ~ btn4 를 찾는 작업, 찾았으면 거기에 이벤트를 걸어주는 진짜 사람 짜증나게 하는게 많다.
<!DOCTYPE html> <html lang="en"> <!-- 1. html 로 텍스트와 버튼을 생성 --> <body> <span>Total clicks : 0</span> <button id="btn1">Click me</button> <span>Total clicks : 0</span> <button id="btn2">Click me</button> <span>Total clicks : 0</span> <button id="btn3">Click me</button> <span>Total clicks : 0</span> <button id="btn4">Click me</button> </body> <script> // 2. 자바스크립트로 문서에서 요소 찾기 const button = document.getElementById('btn'); const span = document.querySelector('span'); let counter = 0; // 3. 버튼 요소에 이벤트 걸어두기 button.addEventListener('click', function () { // 4. 이벤트 감지 counter = counter + 1 span.innerText = `Total clicks : ${counter}`; }); </script> </html>리액트에서는 JSX 로 자바스크립트에 HTML 태그 문법을 사용할 수 있다. 웹 개발자들에게 익숙한 HTML 을 사용할 수 있어 잘 읽히고 함수 안에 리턴값으로 H3, Button 태그를 반환하고 ReactDOM 으로 문서에 렌더링하게 되면 비로서 사용자에게 보이게 되는것이다.
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width" /> <title>replit</title> </head> <body> <div id="root"></div> </body> <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script> <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script> <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> <script type="text/babel"> const root = document.getElementById("root"); const App = () => { # 1. counter 상태 초기값을 0 으로 설정, 상태 변경함수는 setCounter 로 지정한다. const [counter, setCounter] = React.useState(0); function countUp() { # 2. counter 상태를 변경하고(const 라 재생성) 컴포넌트를 리-랜더링한다. setCounter((current) => current + 1); // trigger re-render } # 3. 컴포넌트를 리-랜더링 할때 변경된 부분만 변경한다. return ( <div> <h3>Total clicks: {counter}</h3> <button onClick={countUp}>Click me</button> </div> ); }; ReactDOM.render(<App />, root); </script> </html>※ 리액트가 어떻게 변경되는걸까?
ReactJS는 DOM 변경을 효율적으로 처리하기 위해 가상 DOM(Virtual DOM)이라는 개념을 도입한다. ReactJS는 우선 메모리에 가상 DOM 트리를 생성한다. 이 트리는 실제 DOM 트리의 복사본으로서, 실제 DOM 트리와 별개로 존재한다.
상태 변경이 발생할 때마다 ReactJS는 새로운 가상 DOM 트리를 생성하고, 이전의 가상 DOM 트리와 비교하여 변경된 부분을 파악한다. 이렇게 파악된 변경 사항만 실제 DOM에 반영하는 방식을 사용한다. 이 과정을 '재조정(Reconciliation)' 또는 'Diffing'이라고 한다.
가상 DOM을 사용하면 변경이 필요한 최소한의 요소만 실제 DOM에 반영되기 때문에 불필요한 연산이 줄어들고 성능이 향상된다.
**정리** 📝
1. 리액트의 가상돔은 실제 DOM과 같은 내용을 담고 있는 복사본이다. 그리고 이 복사본은 자바스크립트 객체 형태로 메모리상에 저장되어있다.
2. 리액트는 항상 두 개의 가상돔을 갖고 있다. 첫 번째는 가상돔은 변경 이전의 내용을 담고있고, 두 번째 가상돔은 변경 이후에 보여질 내용을 담고있다.
3. 변경된 내용이 화면에 새롭게 그려지기 이전, 곧 실제 DOM이 변경되기 이전에 리액트는 두 개의 가상돔을 비교해서 정확히 어떤 부분이 바뀌었는지를 효율적으로 비교하여 파악한다. 그리고 이러한 과정을 Diffing이라고 부른다.
4. Diffing을 통해서 변경된 부분들을 파악한 이후에, 리액트는 Batch Update를 수행함으로 실제 DOM에 한번에 적용시켜준다. 그리고 이러한 과정을 Reconciliation, 재조정 이라고 한다.'프론트 > React' 카테고리의 다른 글
React #6. useEffect 의 사용 목적과 방법 (0) 2024.08.13 React #5. 리액트 컴포넌트와 CSS 모듈화의 장점 (0) 2024.08.05 React #3. 컴포넌트의 prop 전달 (0) 2024.08.04 React #1. 요소 생성과 렌더링 (0) 2024.07.31 React #0 바닐라 JS 의 단점과 구조 살펴보기 (0) 2024.07.30