처음 만난 리액트 문서
12.1 Shared State
shared State는 말 그대로 공유된 State 를 의미합니다. 위에서 잠깐 설명한 것처럼 자식 컴포넌트들이 가장 가까운 공통된 부모 컴포넌트의 State를 공유해서 사용하는 것이죠. Shared State를 사용하면 좋은 경우는 어떤 컴포넌트의 State에 있는 데이터를 여러개의 하위 컴포넌트에서 공통적으로 사용하는 경우입니다. 아래 그림에 나와 있는 예시를 통해 설명해보도록 하겠습니다.
위 그림에는 총 세 개의 컴포넌트가 나와 있습니다. 가장 위에있는 컴포넌트는 부모 컴포넌트이고, 아래에 화살표로 연결된 두 개의 컴포넌트는 자식 컴포넌트입니다. 부모 컴포넌트는 값을 갖고 있으며, 왼쪽 아래에 있는 컴포넌트A는 값에 2를 곱해서 표시하는 컴포넌트이고, 오른쪽 아래에 있는 컴포넌트B는 값에 3을 곱해서 표시하는 컴포넌트입니다. 이러한 경우에 자식 컴포넌트들이 각각 값을 갖고 있을 필요가 없겠죠. 그냥 부모 컴포넌트의 State에 있는 값에 각각 2와 3을 곱해서 표시를 해주면 되기 때문입니다. 이번엔 조금 더 구체적인 예시를 하나 더 살펴보도록 하겠습니다.
위 그림에도 마찬가지로 총 세 개의 컴포넌트가 나와 있습니다. 부모 컴포넌트는 degree라는 이름의 섭씨온도 값을 갖고 있으며, 왼쪽 아래에 있는 컴포넌트C는 온도를 섭씨로 표현하는 컴포넌트이고, 오른쪽 아래에 있는 컴포넌트F는 온도를 화씨로 표현하는 컴포넌트입니다. 이 경우에도 자식 컴포넌트들이 각각 온도 값을 갖고 있을 필요가 없이, 그냥 부모 컴포넌트의 State에 있는 섭씨 온도 값을 변환해서 표시를 해주면 됩니다.
지금까지 살펴본 것처럼 하위 컴포넌트들이 공통된 부모 컴포넌트의 State를 공유해서 사용하는 것을 Shared State라고 합니다.
마지막 업데이트: 2025년 08월 21일 09시 05분
이 문서의 저작권은 이인제(소플)에 있습니다. 무단 전재와 무단 복제를 금합니다.
On this page