상태 관리

애플리케이션이 커질수록 상태를 어떻게 구성하고 컴포넌트 간에 데이터가 어떻게 흐르는지에 대해 더 신중하게 생각하는 것이 도움이 됩니다. 중복되거나 복제된 상태는 버그의 일반적인 원인입니다. 이 장에서는 상태를 잘 구조화하는 방법, 상태 업데이트 로직을 유지 관리하기 쉽게 유지하는 방법, 그리고 멀리 떨어진 컴포넌트 간에 상태를 공유하는 방법을 배우게 됩니다.

상태로 입력에 반응하기

React에서는 코드에서 직접 UI를 수정하지 않습니다. 예를 들어, "버튼 비활성화", "버튼 활성화", "성공 메시지 표시" 등의 명령을 작성하지 않습니다. 대신, 컴포넌트의 다양한 시각적 상태("초기 상태", "입력 중 상태", "성공 상태")에 대해 보고 싶은 UI를 설명한 다음, 사용자 입력에 대한 응답으로 상태 변경을 트리거합니다. 이는 디자이너가 UI를 생각하는 방식과 유사합니다.

다음은 React를 사용하여 구축된 퀴즈 양식입니다. 제출 버튼을 활성화하거나 비활성화할지, 그리고 성공 메시지를 대신 표시할지 결정하기 위해status 상태 변수를 어떻게 사용하는지 주목하세요.

상태 구조 선택하기

상태를 잘 구조화하면 수정하고 디버그하기 쉬운 컴포넌트와 지속적인 버그의 원인이 되는 컴포넌트의 차이를 만들 수 있습니다. 가장 중요한 원칙은 상태에 중복되거나 복제된 정보를 포함해서는 안 된다는 것입니다. 불필요한 상태가 있으면 업데이트하는 것을 잊기 쉽고 버그를 도입하게 됩니다!

예를 들어, 이 양식에는중복된fullName상태 변수가 있습니다:

컴포넌트가 렌더링되는 동안 fullName을 계산하여 이를 제거하고 코드를 단순화할 수 있습니다:

이는 사소한 변경처럼 보일 수 있지만, React 앱의 많은 버그가 이런 방식으로 수정됩니다.

컴포넌트 간 상태 공유

때로는 두 컴포넌트의 상태가 항상 함께 변경되도록 하고 싶을 수 있습니다. 이를 위해 두 컴포넌트에서 상태를 제거하고, 가장 가까운 공통 부모로 이동시킨 다음, props를 통해 하위로 전달합니다. 이를 "상태 끌어올리기"라고 하며, React 코드를 작성할 때 가장 흔히 하는 작업 중 하나입니다.

이 예시에서는 한 번에 하나의 패널만 활성화되어야 합니다. 이를 달성하기 위해 각 개별 패널 내부에 활성 상태를 유지하는 대신, 부모 컴포넌트가 상태를 보유하고 자식 컴포넌트에 대한 props를 지정합니다.

상태 보존 및 재설정

컴포넌트를 다시 렌더링할 때, React는 트리의 어떤 부분을 유지(및 업데이트)하고, 어떤 부분을 버리거나 처음부터 다시 생성할지 결정해야 합니다. 대부분의 경우 React의 자동 동작은 충분히 잘 작동합니다. 기본적으로 React는 이전에 렌더링된 컴포넌트 트리와 "일치하는" 트리 부분을 보존합니다.

그러나 때로는 이것이 원하는 바가 아닐 수 있습니다. 이 채팅 앱에서는 메시지를 입력한 후 수신자를 전환해도 입력이 재설정되지 않습니다. 이로 인해 사용자가 실수로 잘못된 사람에게 메시지를 보낼 수 있습니다:

React는 기본 동작을 재정의하고, 다른강제할 수 있습니다. 이는 React에게 수신자가 다르면 새로운 데이터(및 입력과 같은 UI)로 처음부터 다시 생성해야 하는key를 전달하여(예:<Chat key={email} />) 컴포넌트가 상태를 재설정하도록 다른Chat컴포넌트로 간주해야 한다고 알려줍니다. 이제 수신자 간 전환 시 입력 필드가 재설정됩니다. 동일한 컴포넌트를 렌더링하더라도 말이죠.

상태 로직을 리듀서로 추출하기

많은 이벤트 핸들러에 걸쳐 많은 상태 업데이트가 있는 컴포넌트는 압도적일 수 있습니다. 이러한 경우, 모든 상태 업데이트 로직을 컴포넌트 외부의 단일 함수("리듀서")로 통합할 수 있습니다. 이벤트 핸들러는 사용자의 "액션"만 지정하면 되므로 간결해집니다. 파일 하단의 리듀서 함수는 각 액션에 대한 응답으로 상태가 어떻게 업데이트되어야 하는지 지정합니다!

Context로 데이터 깊숙이 전달하기

일반적으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때는 props를 사용합니다. 하지만 어떤 prop을 여러 컴포넌트를 거쳐 전달해야 하거나, 많은 컴포넌트가 동일한 정보를 필요로 하는 경우에는 props 전달이 번거로워질 수 있습니다. Context를 사용하면 부모 컴포넌트가 트리 아래에 있는 모든 컴포넌트(아무리 깊은 곳에 있더라도)에 일부 정보를 명시적으로 props로 전달하지 않고도 사용할 수 있게 만들 수 있습니다.

여기서Heading 컴포넌트는 가장 가까운 Section에 자신의 레벨을 “물어보는” 방식으로 제목 레벨을 결정합니다. 각Section은 부모 Section에 물어보고 그 값에 1을 더하여 자신의 레벨을 추적합니다. 모든Section은 props를 전달하지 않고도 아래에 있는 모든 컴포넌트에 정보를 제공합니다—이는 context를 통해 이루어집니다.

리듀서와 Context로 확장하기

리듀서를 사용하면 컴포넌트의 상태 업데이트 로직을 통합할 수 있습니다. Context를 사용하면 정보를 깊숙이 다른 컴포넌트에 전달할 수 있습니다. 리듀서와 Context를 함께 사용하여 복잡한 화면의 상태를 관리할 수 있습니다.

이 접근 방식에서는 복잡한 상태를 가진 부모 컴포넌트가 리듀서를 사용하여 상태를 관리합니다. 트리 깊숙이 어디에 있는 다른 컴포넌트들도 context를 통해 해당 상태를 읽을 수 있습니다. 또한 해당 상태를 업데이트하기 위해 액션을 디스패치할 수도 있습니다.

다음은 무엇인가요?

다음으로 이동하세요:상태로 입력에 반응하기를 읽고 이 장을 페이지별로 시작하세요!

또는, 이미 이 주제들에 익숙하시다면,탈출구에 대해 읽어보는 것은 어떨까요?