인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

oridori2705님의 프로필 이미지
oridori2705

작성한 질문수

[React / VanillaJS] UI 요소 직접 만들기 Part 2

스낵바 (1/3) context 적용

스낵바를 만들 때 snackBarContext와 snackBarSetContext

해결된 질문

작성

·

36

0

스낵바를 만들 때 snackBarContext와 snackBarSetContext를 둘로 나누셔서 관리하는데
이렇게 하신 이유나 장점을 정확히 알 수 있을까요?
단점도 알려주시면 감사드리겠습니다.

답변 2

0

정재남님의 프로필 이미지
정재남
지식공유자

AI가 잘 설명을 해줘서 덧붙일 말이 없네요. 상태로 관리할 대상 중에 상태'값'으로 사용할 대상과 '함수'로 사용할 대상을 나눈 것입니다. 리렌더링을 최소화 하기 위한 조치입니다. 하나의 컨텍스트로 관리하면 상태가 변경될 때 함수들만 사용하는 컴포넌트도 모두 리렌더링될 것입니다. 상태가 변경되더라도 함수는 변경되지 않을 확률이 높기 때문에 컨텍스트를 분리하면 리렌더링을 줄일 수 있습니다.

리액트 공식문서에서도 다음과 같이 둘을 구분하고 있습니다.

https://ko.react.dev/learn/scaling-up-with-reducer-and-context#step-2-put-state-and-dispatch-into-context

oridori2705님의 프로필 이미지
oridori2705
질문자

헐 빠른답변 감사합니다!

0

안녕하세요, 인프런 AI 인턴입니다. oridori2705님 반갑습니다.

스낵바를 위한 snackBarContextsnackBarSetContext를 따로 관리하는 이유는 주로 상태 관리 측면에서 컴포넌트의 리렌더링을 최소화하고, 코드의 명확성을 높이기 위한 것입니다. 이러한 접근 방식의 장점과 단점을 간단히 설명드리겠습니다.

장점

  1. 리렌더링 최적화: 상태를 제공하는 컨텍스트와 상태 업데이트를 위한 컨텍스트를 분리함으로써, 상태 업데이트가 발생할 때 상태를 읽기만 하는 컴포넌트들이 불필요하게 리렌더링되는 것을 방지할 수 있습니다. 이는 성능 최적화에 도움을 줄 수 있습니다.

  2. 명확한 코드 구조: 상태 값 읽기와 설정을 위한 함수들을 명확히 분리함으로써, 코드가 더 명확하고 이해하기 쉬워집니다. 각 컨텍스트는 자신의 역할에 집중하게 되어 유지보수가 용이해질 수 있습니다.

  3. 캡슐화: 각 콘텍스트의 역할을 분명히 하여, 소비자가 불필요하게 상태를 설정(set)하는 등의 행위를 하도록 제한할 수 있습니다.

단점

  1. 복잡성 증가: 초기 설정 시 두 개의 컨텍스트를 관리해야 하므로, 약간의 복잡성 증가가 있을 수 있습니다.

  2. 추가적인 학습 필요: 개발자들이 이러한 패턴에 익숙하지 않을 경우, 컨텍스트를 둘로 나누는 것이 오히려 코드 이해를 어렵게 만들 수 있습니다.

관련 링크

유사한 주제에 대한 질문과 답변을 아래에서 확인하실 수 있습니다:

위 링크에서는 스낵바와 관련된 다양한 상황과 활용법에 대해 더 깊이 있는 답변이 제공되고 있으니 참고하시면 좋을 것 같습니다.

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

oridori2705님의 프로필 이미지
oridori2705

작성한 질문수

질문하기