[Front] React 의 상태 관리

▶ React의 상태관리

리액트는 단방향 데이터 흐름을 가진다. 상위 컴포넌트에서 State를 가지고 이에 의존하는 하위 컴포넌트가 있다면 props로 해당 state를 넘겨준다.

만약 루트 컴포넌트에서 해당 state가 필요한 컴포넌트 사이에 다른 컴포넌트들이 많이 존재하면 심각한 Props Drilling이 발생하게 된다.

▶ Props Drilling 이 뭐야?

import React from "react";
import "./styles.css";

export default function App() {
  return (
    <div className="App">
      <FirstComponent content="Who needs me?" />
    </div>
  );
}

function FirstComponent({ content }) {
  return (
    <div>
      <h3>I am the first component</h3>;
      <SecondComponent content={content} />|
    </div>
  );
}

function SecondComponent({ content }) {
  return (
    <div>
      <h3>I am the second component</h3>;
      <ThirdComponent content={content} />
    </div>
  );
}

function ThirdComponent({ content }) {
  return (
    <div>
      <h3>I am the third component</h3>;
      <ComponentNeedingProps content={content} />
    </div>
  );
}

function ComponentNeedingProps({ content }) {
  return <h3>{content}</h3>;
}

props drilling이란 위 코드처럼 props를 하위 컴포넌트로 전달하는 과정에서 몇 개의 컴포넌트를 뚫고 들어가는 형태를 말한다.
props drilling이 너무 많이 발생하면 컴포넌트 의존성이 생기고, props를 추적하는 게 어려워진다. 그냥 딱 보기에도 어렵다

▶ 리덕스

전역 상태 저장소가 있고, 어디서든 해당 저장소에 접근할 수 있다면 문제는를 해결할 수 있다.

▶ 리덕스의 특징

Single source of truth
: 동일한 데이터는 항상 같은 곳에서 가지고 온다. 즉, 스토어라는 하나뿐인 데이터 공간이 있다.

State is read-only
: 상태는 Action이라는 객체를 통해서만 상태를 변경할 수 있다.

Change are made with pure function
: 변경은 순수 함수로만 가능하다

▶ 리덕스 장단점

장점

컴포넌트들의 의존성을 분리한다.
Redux DevTools 확장 프로그램을 이용해 상태 파악을 할 수 있다.

단점

수많은 설정 코드가 필요하다.
API 통신 관련 코드를 전역적으로 관리해야 한다.

▶ 마치며

위에서 아래로 가는 게 어려우니 그냥 공용 창고 하나 만들어놓고 집어넣고 꺼내쓰고 하자! 낙수효과는 유지보수가 어렵다.

이거 보는 게 낫다

https://hanamon.kr/%ec%83%81%ed%83%9c%ea%b4%80%eb%a6%ac%eb%8f%84%ea%b5%ac-%ed%95%84%ec%9a%94%ec%84%b1/ 하나몬 - 상태 관리 도구(State Management Tools)의 필요성