inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

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

스낵바 (1/3) context 적용

스낵바를 만들 때 snackBarContext와 snackBarSetContext

해결된 질문

146

oridori2705

작성한 질문수 54

0

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

react typescript dom ui vanilla-js

답변 2

0

정재남

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

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

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

0

oridori2705

헐 빠른답변 감사합니다!

0

인프런 AI 인턴

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

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

장점

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

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

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

단점

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

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

관련 링크

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

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

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

mcp 설치를 못하겠어요

0

12

1

라이브러리 관련 질문 있습니다!

0

10

1

output-styles은 Claude Code의 공식 기능이 아니라고 하는데 혹시 변경된걸까요?

0

16

2

클로드 변경

0

14

1

/config 에서 output-style 을 변경

0

17

1

한국어 문제

0

17

2

Node.js 관련 질문드립니다.

0

22

3

클로드 버전업 설치

0

21

2

쿠폰 문의 드립니다.

0

14

2

13강 프로젝트 생성 Next.js 설치이슈

0

19

3

Shell Command: Install 'cursor' command 진행에서 막혔습니다

0

20

3

74. 데이터 캐시 - 1 (이론) 강의 영상 누락

0

24

1

제네릭을 사용하실 때 콤마

0

167

2

popover createPortal 방식에서

0

146

2

snackbar를 createportal를 썻을 때 갯수 조절이 가능한가요?

0

193

1

useCallback, useMemo의 차이에 대해서 궁금합니다.

0

365

1

createPortal 활용해서 modal 만들 때 활용한 MutationObserver 코드 관련 질문

0

356

3

강의자료 (보일러플레이트) 다운로드 관련 질문

0

256

1

모달만드는 방식 질문

0

243

1

캐러셀 동작원리

0

306

2

dropdown 내부에서 data의 타입을 알아야 할까요?

0

199

1

Provider를 외부에 노출하는 것보다 내부 로직으로 숨기는 것은 어떤가요?

0

287

2

keyEventMap를 전역에 구현하신 이유가 궁금합니다!

0

272

2

테일윈드로 포탈로 모달작성시 뒤에 클릭이 안됩니다

1

316

2