![]()
이전 블로그에서 toast 기능을 Context API 를 통해 구현하였다. (https://doyourbestcode.tistory.com/140) 물론 당장은 toast 기능 하나만 구현하였기 때문에 불필요한 rendering만 좀 신경 써주면 Context API를 사용해도 큰 문제가 없다. 하지만 여러 기능을 Context API를 통해 구현하고자 하면 문제가 발생할 수 있다. 불필요한 rendering을 처리하는 cost 이전 블로그를 보면 ... export const ToastValueContext = createContext(undefined); export const ToastActionContext = ..
![]()
프론트엔드 작업을 하다보면 꽤 많이 발생되는 비효율적인 구조 중 하나가 과도한 props drilling 이라고 생각한다. props drilling 말 그대로 부모 컴포넌트에서 자식 컴포넌트로 데이터를 값을 전달해 주는 것을 말하는데, 너무 깊은 단계를 거쳐야 한다면 그 사이에 있는 모든 컴포넌트에서 작업을 해줘야하기 때문에 매우 불편하다. 이를 방지해주기 위해 Context라는 개념을 사용한다. Context란? Context는 리액트 컴포넌트간에 어떠한 값을 공유할수 있게 해주는 기능이다. 주로 Context는 전역적으로 필요한 값을 다룰 때 사용하지만, 단순히 "리액트 컴포넌트에서 Props가 아닌 또 다른 방식으로 컴포넌트간에 값을 전달하는 방법이다" 라고 접근을 하시는 것이 좋다고 참고한 블로..
