[WIL] React 입문

이현동·2023년 2월 13일

WIL

목록 보기

5/9

한 주 회고

이번 주는 리액트에 대해서 처음 배운 한 주였다.
리액트의 원리와 사용이유, 장단점에 대해서 알아볼 수 있었고, 간단한 'toDo' 웹을 만들어 보면서 사용법을 익혔던 것 같다.
리액트에서 중요하다고 생각되는 개념들을 정리하고자 한다.

state

리액트에서 state는 컴포넌트 내에서 사용되며 컴포넌트의 현재 상황에 대한 정보를 나타내는 자바스크립트 객체이다.
이제 정말로 리액트에서 state를 사용하는 이유는 변수는 변경되어도 자동으로 화면이 바뀌지 않는다. 하지만 state는 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다.

즉, 유동적인 변수를 사용할 때 화면에 그려지는 변수도 정상적으로 변경되길 원한다면 사용한다.이 state를 사용하기 위해서 useState라는 훅을 사용하게 된다.

useState

const [value, setValue] = useState(0);

value, setValue :
value
관리할 value(변수 선언)
setValue
value를 관리, value를 재선언할 수 있다
주의
value가 원시 데이터타입이 아닌 객체 데이터 타입 (주소를 참조하는)인 경우에는 불변성을 유지 해주어야 한다.

업데이트 방법

기존의 업데이트 방식

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 1씩 플러스된다. */}
      <div>{number}</div> 
      <button
        onClick={() => {
          setNumber(number + 1); // 첫번째 줄 
          setNumber(number + 1); // 두번쨰 줄
          setNumber(number + 1); // 세번째 줄
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

이때 기대되는 값은 setNumber가 3번이 실행이 되었으므로 number가 3 이 될 것이라고 예상할 수 있지만, 값은 1이 나온다.

함수형 업데이트 방식

// src/App.js

import { useState } from "react";

const App = () => {
  const [number, setNumber] = useState(0);
  return (
    <div>
			{/* 버튼을 누르면 3씩 플러스 된다. */}
      <div>{number}</div>
      <button
        onClick={() => {
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
          setNumber((previousState) => previousState + 1);
        }}
      >
        버튼
      </button>
    </div>
  );
}

export default App;

왜 다르게 동작할까?

일반 업데이트 방식은 버튼을 클릭했을 때 첫번째 줄 ~ 세번째 줄의 있는 setNumber가 각각 실행되는 것이 아니라, [[DOM? virtual DOM ?#Batch Update|배치(batch)]]로 처리합니다. 즉 우리가 onClick을 했을 때 setNumber 라는 명령을 세번 내리지만, 리액트는 그 명령을 하나로 모아 최종적으로 한번만 실행을 시킵니다. 그래서 setNumber을 3번 명령하던, 100번 명령하던 1번만 실행됩니다.

반면에 함수형 업데이트 방식은 3번을 동시에 명령을 내리면, 그 명령을 모아 순차적으로 각각 1번씩 실행시킵니다. 0에 1더하고, 그 다음 1에 1을 더하고, 2에 1을 더해서 3이라는 결과가 우리 눈에 보이는 것이죠.

그렇다면 왜 리액트는 위 방식으로 동작할까?

공식문서에서
리액트는 성능을 위해 단일 업데이트(batch update)로 한꺼번에 처리함
즉, 불필요한 리-렌더링을 방지(렌더링 최적화)를 위해서 한꺼번에 state를 모아놓고 같은 state를 같은 방식으로 처리한다면 딱 한번만 실행하게 된다.
하지만 함수형 업데이트를 사용하면 setState()에서 인자를 받을 때 이전 값(previousState)을 받고 그 값에 대한 것을 실행 하기 때문이다.

props

부모 컴포넌트가 자식 컴포넌트에게 물려준 데이터이다. 다시 말해, 컴포넌트 간의 정보 교류 방법이다.

props는 반드시 위에서 아래 방향으로 흐른다. 즉, [부모] → [자식] 방향으로만 흐른다==(단방향)==
props는 반드시 읽기 전용으로 취급하며, 변경하지 않는다.

이전 글 참고 → props - helee0619

리렌더링

리액트에서 첫 렌더링은 자동으로 일어난다. 리액트 앱이 실행되면 리액트는 전체 컴포넌트를 렌더링하고 결과물을 DOM에 반영해 브라우저상에 보여준다. 첫 렌더링을 끝난 이후에 추가로 렌더링을 트리거 하려면 상태(state)를 변경해주면 됩니다.

컴포넌트 상태에 변화가 생기면 리렌더링이 발생합니다. 이때 여러 상태가 변경됐다면 리액트는 이를 큐 자료구조에 넣어 순서를 관리합니다.

주방상황으로 예를 들어보면

리렌더링은 음식점 손님이 첫 주문 이후에 갈증이 생겨 추가로 음료를 주문하거나 처음 받은 음식이 마음에 들지 않아 새로운 메뉴를 주문하는 것과 같다.
새로운 UI주문(리렌더링)이 일어나면 리액트가 변경된 내용을 주방에 있는 요리사인 컴포넌트에 전달하고 컴포넌트는 새로운 변경된 주문을 토대로 새로운 요리(UI)를 만든다.
새롭게 만들어진 요리(렌러딩 결과)는 리액트에 의해 다시 손님 테이블에 올려진다.
(DOM에 반영 - commit phase)

다음 주

이번 주는 redux, react-route-dom의 사용법에 대해서 배우게 된다.
간단하게 설명해보자면 redux는 전역상태관리툴 을 말한다. 위에서 props를 통해 자식 컴포넌트로 값을 계속 내려줄 때, 컴포넌트가 많아지게 되면 props drilling때문에 state의 관리와 유지보서가 힘들어진다. 따라서 redux라는 툴을 사용해 state를 관리할 수 있어야 한다.
react-route-dom은 URL 링크에 따라 Component를 생성해주는 것이다. react는 SPA인데, 하나의 링크로 사용자에게 페이지를 보여줄 수 있지만 특정 페이지로 이동하려고 할 때 Router Dom을 사용하게 된다.
react-router-dom을 사용하면 SPA의 장점인 페이지가 깜빡이지 않는 것을 페이지가 이동할 때에도 깜빡이지 않게 할 수 있다.