React 상태 관리

" React는 Component를 기반으로 하는 상태관리 라이브러리다. "

 

사용자가 애플리케이션에서 상호작용을 하게되면, React는 상위 컴포넌트가 갖고 있는 상태를 props(속성)의 형태로 하위 컴포넌트에 전달하게 된다.

따라서 여러 컴포넌트가 상호작용하는 React에서는 변화하는 값이 어떤 컴포넌트에서 왔는지 알아야 핢에도 모든 컴포넌트가 부모자식 관계로 묶여있지 않은 이상, 현재의 props가 어디서부터 왔는지 파악하는 것은 프로젝트의 규모가 커짐에 따라 상당히 어려운 문제가 된다.

 

props를 전달하는 규모에 따라서 상태를 크게 3가지로 나눌 수 있는데, 이는 아래와 같다.

1. Local State : props가 컴포넌트 간의 교환이 아닌 한 컴포넌트 안에서 교환이 일어나는 상태이다.
2. Cross-Component State : props가 2개 이상의 컴포넌트 사이에서 교환이 일어나는 상태이다.
3. App-Wide State : props가 프로젝트 전체에 걸쳐 교환이 일어나는 상태이다.

이러한 컴포넌트 교환이 일어나는 과정에서, props가 하위 컴포넌트에 끊임없이 전달되는 상태를 props drilling이라고 한다.

 

props drilling은 그 자체로 문제라고 보기는 어렵다.

React가 채택하는 컴포넌트와 상태의 개념을 사용하면 필연적으로 발생하는 상황이기 때문이다.

그러나, 프로젝트 규모가 커져서 props drilling이 과하게 발생한다면 다음과 같은 문제를 야기할 수 있다.

1. 코드의 가독성이 나빠진다.
2. 코드의 유지 보수에 불리하다
3. Props가 전달 과정에서 예기치 못한 리렌더링을 야기하여 웹 퍼포먼스에 영향을 미칠 수 있다.

---

Props Drilling 예시

import React, { useState } from "react";
import styled from "styled-components";

// Styled Component 생략

// 버튼을 통해 수의 상태를 변경시키는 대표적인 useState 예시
export default function App() {
  const [number, setNumber] = useState(1);

  const plusNum = () => {
    setNumber(number + 1); 
  };

  const minusNum = () => {
    setNumber(number - 1);
  };

  return (
    <Container>
      <Text weight size="1.5rem">
        [Parents Component]
      </Text>
      <Text>
        Child4 컴포넌트에 있는 버튼을 통해
        <br /> state를 변경하려고 합니다..
      </Text>
      <Text weight color="tomato">
        Props Driling이 발생!!
      </Text>
      <Quantity>{`수량 : ${number}`}</Quantity>
      <Child1 plusNum={plusNum} minusNum={minusNum} /> // Child1 컴포넌트로 props 전달
    </Container>
  );
}

//
function Child1({ plusNum, minusNum }) { // Child1 컴포넌트에서 props 인자로 받고
  console.log("Child1");
  return (
    <Container>
      <Text>[Child 1 Component]</Text>
      <Child2 plusNum={plusNum} minusNum={minusNum} /> // Child2 컴포넌트로 props 전달
    </Container>
  );
}

function Child2({ plusNum, minusNum }) { // Child2 컴포넌트에서 props 인자로 받고
  console.log("Child2");
  return (
    <Container>
      <Text>[Child 2 Component]</Text>
      <Child3 plusNum={plusNum} minusNum={minusNum} /> // Child3 컴포넌트로 props 전달
    </Container>
  );
}

function Child3({ plusNum, minusNum }) { // Child3 컴포넌트에서 props 인자로 받고
  console.log("Child3");
  return (
    <Container>
      <Text>[Child 3 Component]</Text>
      <Child4 plusNum={plusNum} minusNum={minusNum} /> // Child4 컴포넌트로 props 전달
    </Container>
  );
}

function Child4({ plusNum, minusNum }) {  // Child4 컴포넌트에서 props 인자로 받고
  console.log("Child4");
  return (
    <Container>
      <Text>[Child 4 Component]</Text>
      <Button onClick={plusNum}>👍</Button> // button을 통해 App()에 명시된 요소에 상태를 변경(+)
      <Button onClick={minusNum}>👎</Button> // button을 통해 App()에 명시된 요소에 상태를 변경(-)
    </Container>
  );
}

---

이러한 과제를 극복하기 위해 고안된 라이브러리들이 있다.

redux, Mobx, recoil 등과 같은 사용하면 해당 값들을 필요로 하는 컴포넌트에서 직접 불러서 사용할 수 있게 된다.