질문
React에서 상태(state) 관리 중 ‘lifting state up’과 ‘prop drilling’을 설명하고, 복잡한 컴포넌트 계층 구조에서 이로 인해 발생할 수 있는 문제들을 설명하세요.
질문의도
‘lifting state up’과 ‘prop drilling’의 개념을 명확히 이해하고, 복잡한 컴포넌트 구조에서 발생할 수 있는 문제(예: 유지보수성 저하, 코드 복잡성 증가)를 해결할 수 있는 능력을 평가하려는 의도입니다.
1. Lifting State Up과 Prop Drilling의 설명
•
Lifting State Up:
◦
정의: 여러 자식 컴포넌트가 동일한 상태를 필요로 할 때, 그 상태를 가장 가까운 공통 부모 컴포넌트로 끌어올려 관리하는 방법이다.
◦
예시: 두 개의 자식 컴포넌트가 같은 입력 값을 필요로 할 경우, 부모 컴포넌트에서 상태를 정의하고 자식 컴포넌트에 props로 전달하여 상태를 공유
•
Prop Drilling:
◦
정의: 상태나 함수를 부모 컴포넌트에서 자식 컴포넌트로, 그리고 그 자식의 자식에게까지 전달하는 과정입니다. 이 과정이 깊어질수록 중간 컴포넌트가 해당 props를 전달해야 한다.
◦
예시: 부모 컴포넌트에서 관리하는 상태를 자식 A가 사용하고, 자식 B가 필요할 때, 자식 A가 중간에 있는 자식 C를 통해 전달해야 하는 경우가 발생
2. 복잡한 컴포넌트 계층에서 발생할 수 있는 문제 예시
•
상태 관리의 복잡성: 여러 컴포넌트가 동일한 상태를 필요로 할 경우, 부모 컴포넌트에서 상태를 관리하는 것이 복잡해질 수 있다. 예를 들어, 상태를 업데이트하는 로직이 부모에 집중되면, 그 부모 컴포넌트가 너무 많은 책임을 지게 되어 유지보수가 어려워질 수 있다.(로직분리)
•
불필요한 리렌더링: Prop drilling로 인해 중간 컴포넌트가 props를 전달하는 과정에서, 해당 컴포넌트가 필요하지 않은 경우에도 리렌더링이 발생할 수 있고, 이는 성능 저하로 이어질 수 있다.
3. 위 문제를 해결하는 방법
•
Context API 사용: React의 Context API를 활용하여 상태를 전역적으로 관리하면, prop drilling 문제를 해결할 수 있다. Context를 사용하면 중간 컴포넌트를 거치지 않고도 필요한 컴포넌트에서 직접 상태를 구독할 수 있다.
•
커스텀 훅: 상태와 관련된 로직을 커스텀 훅으로 분리하여 재사용할 수 있습니다. 이를 통해 상태 관리 로직을 컴포넌트에서 분리하고, 필요한 상태와 함수를 각 컴포넌트에서 쉽게 사용할 수 있다.
•
상태 관리 라이브러리: Redux, MobX 등과 같은 상태 관리 라이브러리를 사용하면 전역 상태를 효율적으로 관리할 수 있습니다. 이러한 라이브러리는 옵저버 패턴을 기반으로 하여 상태 변화 시 구독하고 있는 컴포넌트를 자동으로 업데이트한다.
•
옵저버 패턴을 통한 상태 관리 구현
◦
상태와 플래그 관리: 부모 컴포넌트에서 상태를 정의하고, 해당 상태를 변경하는 함수를 생성한다. 이 함수는 상태 변경 시 특정 플래그를 설정한다
◦
자식 컴포넌트에서 구독: 자식 컴포넌트들은 부모로부터 필요한 상태와 함수를 props로 전달 받고, 자식 컴포넌트는 부모로부터 받은 플래그의 변화에 따라 특정 함수를 실행하도록 설장할 수 있다.
◦
변경 감지: 부모 컴포넌트의 상태가 변경되면, 이를 감지해 자식 컴포넌트가 자동으로 업데이트되도록 할 수 있다.(useEffect와 같은 훅을 활용)
◦
장점: 상태 로직을 부모 컴포넌트에서 관리하면서도, 자식 컴포넌트는 필요한 상태에만 의존하게 할 수 있고, 상태 관리 라이브러리를 사용하지 않고 퍼포먼스적으로 이득을 볼 수 있다.(실제 전역 상태관리의 dispatch 속도는 느리다)