[React] 📚 State

📋 기억하고 싶은 내용

📌 useState() hook

• 함수 컴포넌트는 JSX를 return 하는 함수다.
• 함수 컴포넌트에서 내부적으로 상태를 관리해야 하는 일이 필요하다.
• 이를 위해서 React에서는 useState() hook을 사용해야 한다.

import React, { useState } from "react";

const [state, setSate] = useState();

• setState()는 컴포넌트의 re-rendering을 발생시켜 업데이트를 해준다.

📌 불변성 (immutable)

• 불변성은 변하지 않는 성질을 일컫는다.

• 프로그래밍에서 불변성을 지킨다는 말은 메모리 영역의 값을 직접적으로 변경하지 않는 것을 의미한다.

• setState() 함수를 실행한다고 해서 무조건 re-rendering이 발생하는 것은 아니다.

  • setState() 함수 이전의 state 값과 setState() 함수 이후의 state 값을 비교해서 만약 값이 다르면 re-rendring이 일어난다.

• 불변성을 지키지 않고, 메모리 영역의 값을 직접 변경하면 React는 state가 바뀌었다고 인지하지 못한다.

  • 왜냐하면 React는 이전 state 값과 이후 state 값을 비교할 때, 얕은 비교(Shallow Compare)를 하기 때문이다.

  얕은 비교에서 두 객체의 메모리 주소가 같다면 같다고 표현한다.

원시 타입 VS 참조 타입

• 원시 타입은 불변성을 이미 가지고 있기 때문에 setState()를 할 때 딱히 고려할 점이 없지만, 참조 타입은 불변성이 없기 때문에 setSate()를 할 때 불변성을 가지도록 호출해줘야 한다.

참조 타입 state 다루기

const Counter = () => {
  const operators = ["+", "-", "*"];
  const [info, setInfo] = useState({
    count: 0,
    show: true,
    operator: operators[0],
  });

  return (
    <div>
      <button onClick={() => setInfo({ ...info, show: !info.show })}>
        Show and Hide
      </button> 
    </div>
  );
};

• Array도 참조 타입이다.

📌 props와 state

props

• 부모 컴포넌트가 자식 컴포넌트에게 전달하는 값이다.
• 값을 자신 혹은 자식 컴포넌트가 변경할 수 없다.

state

• 컴포넌트가 스스로 관리하는 상태 값이다.
• setState() 함수를 통해서 값을 변경할 수 있다.

props를 통해 값을 내려 받거나 자신이 관리하고 있는 state가 변경되면 컴포넌트 렌더링이 발생한다.

📌 State 심화

비동기로 이루어지는 setState()

• setState() 함수는 비동기적으로 실행된다.
• 비동기적으로 실행되면서 발생하는 문제를 피할려면 setState() 인자를 함수로 넘겨주면 된다.

const [number, setNumber] = useState(1);

const add = () => setNumber((number) => number + 1);
const subtract = () => setNumber((number) => number - 1);
const multiplyBy2 = () => setNumber((number) => number * 2);

단방향 데이터 흐름

• React의 데이터는 항상 아래로 흐른다.
• state는 항상 특정한 컴포넌트가 가지고 있으며, 그 state로부터 파생된 UI 또는 데이터는 오직 자식 컴포넌트에만 영향을 미친다.

state 끌어올리기

• 모든 데이터 요소를 한 곳에서만 제어 또는 편집할 수 있도록 설계해야 한다.
• 동일한 데이터에 대한 변경사항을 여러 컴포넌트에 반영해야 할 필요가 종종 있는데, 이럴 때는 가장 가까운 부모 컴포넌트로 state를 끌어올리는 것이 좋다.

🌝 수강한 소감 & 떠오르는 생각

• state 끌어올리기 실습을 하면서 모든 데이터를 한 곳에서만 제어할 수 있도록 설계하는 것이 중요하다는 사실을 깨달았다. state를 끌어올리는 것이 아직 낯설고 코드를 이해하기 헷갈리지만, 반복해서 연습하도록 하자!

🔗 참고 래퍼런스

• State를 올바르게 사용하기 - React Docs
• 단일 진실 공급원 - 위키백과
• State 끌어올리기 - React Docs