상태 끌어올리기란?

상태 끌어올리기(Lifting State Up)는 리액트에서의 상태(useState)를 부모 컴포넌트로 올리는 일종의 패턴을 가리킨다. 기본적으로 리액트는 단방향 데이터 흐름(One-way Data Flow)이라는 원칙을 가지고 있는데, 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태나 타입이 무엇인지만 알 수 있다. 데이터가 state를 통해 왔는지, 하드 코딩으로 입력되어 왔는지 알지 못한다. 그것을 리액트는 이런 방식으로 해결한다.

상위 컴포넌트의 "상태를 변경하는 함수" 그 자체를 하위 컴포넌트로 전다하고, 이 함수를 하위 컴포넌트가 실행한다.

단방향 데이터의 흐름을 벗어나지 않는 해결 방법이다. 이걸 상태 끌어올리기라고 한다.

상태 끌어올리기의 단점이 있을까?

리액트의 동작 원칙인 단방향 데이터 흐름의 원칙이 지켜지는데 문제가 과연있을까?

복잡성 증가

상태를 끌어올리는 패턴은 컴포넌트 간에 데이터 흐름을 관리하는 복잡성을 증가시킬 수 있다. 특히 대규모 애플리케이션에서 상태를 끌어올리면 컴포넌트 계층 구조가 더 복잡해질 수 있다.

성능 문제

상위 컴포넌트에서 상태를 끌어올리면, 하위 컴포넌트에서 필요하지 않은 상태 업데이트가 발생할 수 있다. 이로 인해 성능 문제가 발생할 수 있으며, 이를 최적화하기 위해 React의 메모이제이션 기능을 활용한다.

재사용성 감소

상태를 끌어올리면 해당 상태를 사용하는 여러 하위 컴포넌트가 해당 상태에 의존하게 된다. 이로 인해 상위 컴포넌트를 재사용하기 어려움이 존재한다.

컴포넌트 구조 변경 어려움

상태를 끌어올리면 컴포넌트 계층 구조를 변경하기 어렵다. 특정 상태를 다른 컴포넌트로 이동하려면 많은 코드 변경이 필요할 수 있다.

코드 가독성 감소

상태를 끌어올리면 컴포넌트 간에 데이터가 어디서 왔는지 추적하기 어려워질 수 있으며, 코드 가독성이 감소할 수 있다.

하지만 모든 단점들은 개발자의 역량에 따라, 어떻게 상태를 관리하고 전달하느냐에 따라 충분히 극복할 수 있는 단점들이다. 그러므로 상태 끌어올리기 패턴을 사용할 경우에는 항상 위 단점들을 생각하고 고려해서 코드를 작성할 수 있도록 하자.