강의

멘토링

로드맵

Inflearn brand logo image

인프런 커뮤니티 질문&답변

부드러운 족제비님의 프로필 이미지
부드러운 족제비

작성한 질문수

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

12.8) 일기 관리 기능 구현하기 1

state부분에 대해 질문이 있습니다.

해결된 질문

작성

·

67

0

안녕하세요 강의 너무 잘 듣고 있습니다. 수업을 듣다가 감정일기만들기에서 처음에 일기 내용을을 담는 data라는 것을 만들고 이걸 new, edit페이지 등에 전부 필요하니 전체 공급하기위해 context를 사용한다라고 이해를 하고 있는데 궁금한점이 나중에 혼자 코드를 작성을 할때에 state가 어느 컴포넌트에 필요해서 context를 사용하고 이런것은 어떻게 알 수 있을까요?

답변 2

0

이정환 Winterlood님의 프로필 이미지
이정환 Winterlood
지식공유자

안녕하세요 이정환입니다.

Context는 Props Drilling 문제를 해결하기 위해 제공되는 기능인 만큼, 앞으로의 프로젝트에서 Props Drilling이 발생하거나 발생할 것 같은 상황에 Context를 사용해 주시면 됩니다.

State의 배치는 카운터 앱 프로젝트를 개발하면서 말씀드린 것 처럼, 해당 State 값을 공유해야 하는 모든 컴포넌트들의 최소 공통 조상이 되는 컴포넌트에 배치해 주시면 됩니다.

0

안녕하세요, 인프런 AI 인턴입니다. 부드러운 족제비님!

React에서 Context API는 컴포넌트 트리 전반에 데이터를 효율적으로 전달하기 위해 굉장히 유용한 도구입니다. 특히 여러 컴포넌트에서 동일한 상태나 기능이 필요할 때 사용됩니다. 질문하신 상황에 대해 설명드리겠습니다.

Context 사용 시점 결정하기

  1. 다수의 컴포넌트가 동일한 데이터를 필요로 하는 경우: 예를 들어, 여러 페이지에서 사용자가 입력한 데이터를 관리해야 한다면 Context를 통해 이 정보를 전역적으로 관리할 수 있습니다. 강의의 감정일기 예제처럼 특정 데이터(state 풀의 데이터들)가 여러 곳에서 필요하다면 Context 사용을 고려해보세요.

  2. 복잡한 Prop Drilling 방지: 만약 자식 컴포넌트, 그 자식의 자식 컴포넌트 등으로 동일한 데이터를 연쇄적으로 내려보내야 한다면 그것을 간소화하는데 Context가 도움이 됩니다.

  3. 컴포넌트의 위치에 대한 추상화 필요: 특정 데이터나 함수 로직이 컴포넌트의 계층 구조에 따른 깊은 곳에서 사용될 필요가 있지만, 그 위치를 신경 쓰고 싶지 않을 때 Context를 사용하는 것이 유리합니다.

관련 질문 및 자료

감정일기 프로젝트에서 context 사용에 대한 부분과 유사한 문제는 다른 수강생분들도 동일하게 겪은 바 있습니다. 유사한 질문을 참고하시면 더 이해가 쉬워질 것입니다.

  1. “data와 onCreate, onRemove, onEdit 을 같은 context에서 전달하면 안되는 이유” - 같은 문제를 다룬 질문입니다.
  2. “context와 최적화 관련 질문”

위 링크들은 Context API를 어떻게 구성해야 효율적으로 사용할 수 있는지 깊게 다룹니다. 강의 내용을 복습하시면서 해당 질문들을 읽어보시면 이해가 더 명확해질 것입니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

부드러운 족제비님의 프로필 이미지
부드러운 족제비

작성한 질문수

질문하기