[리액트 입문주차] 1-15~16 컴포넌트와 렌더링

1-15 Component & Rendering

1. 컴포넌트란?

- 리액트의 핵심 빌딩 블록 중 하나

- UI요소를 표현하는 최소한의 단위, 화면의 특정 부분이 어떻게 생길지 정하는 선언체

2. 명령형 vs 선언형 프로그래밍

- DOM (명령형 프로그래밍)

> 어떻게(How)를 중요시하여 프로그램의 제어 흐름과 같은 방법을 제시하고 목표 명시 X

> 직접 DOM 객체를 조작하는 명령형 방식

 

- 선언형 프로그래밍 

> 무엇(What)을 중요시하여 제어의 흐름보다 목적을 중요시여기는 형태

> UI를 선언하고 render함수를 호출하면 리액트가 알아서 절차를 수행해 화면에 출력해줌

>> 프론트영역이 비대해지기 때문에 생성됨

3. 렌더링이란?

- 컴포넌트가 현재 props와 state의 상태에 기초하여 UI를 어떻게 구성할지 컴포넌트에게 요청하는 작업

- 데이터에 근거하여 어떻게 화면을 그릴지 요청하는 것

- 과정 : Trigger -> Render -> Commit

- 예를 들어 음식 주문 -> 요리 -> 다시 갖다주기

 

1. 렌더링 트리거

- 첫 리액트 앱을 실행했을 때 -> 첫 렌더링 

- 현재 리액트 내부에 어떤 상태(state) 변경이 발생했을 때

> 내부 state가 변경되었을 때

>컴포넌트에 새로운 props가 들어올 때

>> 상위 부모 컴포넌트에서 위의 두 이유로 렌더링이 발생했을 때

- 리액트 앱이 실행되고 첫 렌더링이 일어나면, 리액트는 컴포넌트 루트에서 시작하여 아래로 쭉 훑으며 컴포넌트가 반환하는 JSX 결과물을 DOM요소에 반영

 

2. 리렌더링

- 여러 상태가 변경되면 리액트는 큐(FIFO) 자료구조에 넣어 순서를 관리

- 처음 변경 이후로 계속 변경사항을 순서대로 관리해 줌

 

* 브라우저 렌더링

- 브라우저 렌더링과 리액트의 렌더링은 다른 프로세스

- 렌더링이 완료되고 React가 DOM을 업데이트한 후 브라우저가 화면을 그림

- 브라우저 렌더링 -> 페인팅이라고도 함

1-16 실습 - 카운터 앱 만들기

import React, { useState } from "react";

function App() {
  const [count, setCount] = useState(0);

  const plusClickHandler = () => {
    let plusCount = count + 1;
    setCount(plusCount);
  };

  const minusClickHandler = () => {
    let minusCount = count - 1;
    setCount(minusCount);
  };

  return (
    <div
      style={{
        width: "500px",
        margin: "0 auto",
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
      }}
    >
      <p
        style={{
          textAlign: "center",
        }}
      >
        {count}
      </p>
      <div>
        <button onClick={plusClickHandler}>+ 1</button>
        <button onClick={minusClickHandler}>- 1</button>
      </div>
    </div>
  );
}

export default App;