[React] 리액트가 렌더링 하는 방법

📘 리액트는 어떻게 렌더링을 할 수 있을까?

여타의 설명서없이 리액트를 실행하면 굉장히 혼란스러워집니다.

 

HTML을 작성해야하는데 어디서 작성할지.. 폴더는 또 왜이리많은지...

 

그러다 이제 App.js에 적으라는 어딘가의 설명을 보고 본격적으로 리액트 사용이 되는데요.

 

그런데 어떻게 JS파일에 적었는데 화면에 렌더링이 되는지 궁금합니다.

 

어떻게 이런 일이 가능할까요??

💭 Virture DOM

리액트에서는 실제 DOM에 바로 요소를 연결시키는 것이 아닌 가상 DOM에 먼저 연결을 시킵니다.

 

가상 DOM이란 메모리 상의 DOM트리를 뜻합니다. 실제 DOM을 단순화 시킨 개념입니다.

 

만약 업데이트가 일어나면 가상DOM끼리 비교를 한뒤에 업데이트를 합니다

 

비유하자면 가상 DOM은 초안이고 실제 DOM은 최종본 같은 느낌입니다.

🖥️ 렌더링

리액트로 구현되는 노드들은 root노드안에서 관리가 됩니다.

 

따라서 요소를 만들고 root노드에 붙인다음 렌더링을 하는 순서로 이어지게 됩니다.

 

또 요소는 HTML과는 다르게 리액트에서는 일반객체로 관리가됩니다.

 

실제로 버튼을 하나 만들고 싶다하면 밑의 코드로 만듭니다.

 

const btn = createElement('button'.{type="button"},click'

 

createElement('HTML태그',{ 태그안에들어갈 속성과 속성값}, 태그 안에 들어갈 내용 }

 

일반객체는 위와같은 코드로 이루어집니다.

 

요소를 만들었다면 root노드에 붙입니다.

const root = document.getElementById('app')

const elem = root.createRoot(btn)

elem.render(btn)

❓ 조건부 렌더링

특정 조건에 따른 렌더링을 다르게 해야할 때 이를 조건부렌더링이라 부릅니다.

 

리액트에서는 if문대신 삼항연산자를 사용해 간단한 조건식을 처리하여 렌더링 할 수 있습니다

 

삼항연산자 : 조건? 참 : 거짓

function Item({ name, isPacked }) {
  return (
    <li className="item">
      {name} {isPacked ? '✅':'❌"}
    </li>
  );
}

 

만약 조건문이 거짓일 때 ❌도 띄우고싶지 않은겁니다.

 

이럴때는 ''이나 null로 처리해줘도 되지만 &&연산자를 이용하여 처리할 수 있습니다

 

&&연산자의 특징을 살펴보자면,

• && 연산자는 falsy한 값을 반환합니다.
• 만약 falsy한 값이 없다면 가장 오른쪽에 있는 값을 반환합니다. 

위의 코드를 &&연산자를 이용해 작성해 본다면 아래와 같이 작성할 수 있습니다.

function Item({ name, isPacked }) {
return (
 <li className="item">
   {name} {isPacked && '✅'}
 </li>
);
}

 

그런데 &&연산자를 사용할 때는 주의점이 있습니다.

 

falsy한 값을 반환해준다고 해서 0을 입력하면 화면에 진짜로 숫자 0을 띄워줍니다.

 

그렇기 때문에 상태가 변하는 count변수 같은것을 사용할 때 조건문을 통해서 처리해야 합니다

 

function Item({ name, importance }) {
  return (
    <li className="item">
      {name} {importance > 0 && importance]
    </li>
  );
}

export default function PackingList() {
  return (
    <section>
      <h1>Sally Ride's Packing List</h1>
      <ul>
        <Item
          importance={9}
          name="Space suit"
        />
        <Item
          importance={0}
          name="Helmet with a golden leaf"
        />
        <Item
          importance={6}
          name="Photo of Tam"
        />
      </ul>
    </section>
  );
}

---

📋 리스트 렌더링

비슷하게 생긴 UI를 반복해서 렌더링한다고 가정했을때, 데이터가 바뀔때마다 수동적으로 컴포넌트를 추가했다 삭제했다 하면

 

매우 비효율적인 일이됩니다.

 

그렇기 때문에 배열메서드를 사용해서 반복적으로 같은 UI를 렌더링 시킬수 있는데 이것을 리스트렌더링이라고 합니다.

export const recipes = [{
  id: 'greek-salad',
  name: 'Greek Salad',
}, {
  id: 'hawaiian-pizza',
  name: 'Hawaiian Pizza',
}, {
  id: 'hummus',
  name: 'Hummus',
}];

 

위와 같은 배열로 된 데이터를 기반으로 반복적인 UI를 출력 할 수 있습니다

 

그런데 리스트렌더링 할 때 항상 key를 사용해야합니다

 

키가 없다면 컴퓨터는 배열메서드의 번호를 인덱스로 남깁니다.

 

이렇게 되면 배열이 변형될 때 인덱스 넘버도 뒤죽박죽섞여서 컴퓨터는 무엇이 개발자가 원하는 순서인지 알지 못합니다.

 

 

 

위 데이터를 기반으로 리스트 렌더링을해보면 아래 코드와 같습니다.

import { recipes } from './data.js';

export default function RecipeList() {
  return (
    <div>
      <h1>Recipes</h1>
      {
        recipes.map(item =>
         <h2 key = {item.id}>{item.name}</h2>
      }
    </div>
  );
}

 

---

🚀 컴포넌트 렌더링

 

컴포넌트를 렌더링 하기전 리액트는 바로 실제 DOM에 연결시키지 않고 리액트에서 자체적으로 한번 검열을 합니다.

 

이 과정을 통해서 실제 화면에 렌더링이 되는데 3단계로 설명 될 수 있습니다.

 

1. 렌더링 트리거

 

    렌더링을 시작할 수 있게하는 방아쇠같은 역할을 합니다.

 

    렌더링 트리거는 두가지에 의해 발동 됩니다.

 

    첫 째로, 화면에 처음 렌더링을 할때 발동되고

 

    두번째로, state가 업데이트가 되면 렌더링 트리거가 발동됩니다

 

2. 컴포넌트렌더링

 

   렌더링 트리거를 받았으면 리액트는 root컴포넌트를 가져옵니다. 

 

   그 후, 업데이트된 컴포넌트와 root컴포넌트의 렌더 결과를 비교하여 최근 렌더링된 다른 부분만을 가져옵니다.

 

3.  DOM에 커밋

 

   기존의 컴포넌트와 다른점을 발견했다면 실제 DOM에 커밋합니다.

 

   여기서 커밋은 깃허브에서 커밋한다와 동일한 의미를 가지고있습니다.