Next.js 14에서 Context를 사용해서 토스트 메시지 구현하고 최적화하기
·
Next.js
계정이 존재하지 않거나 일부 정보가 틀렸을 때 사용자에게 안내 메시지를 제공하기 위해 애플리케이션 전역에서 사용할 토스트 메시지를 구현했습니다. 모든 컴포넌트에서 토스트 메시지를 설정할 수 있으며 토스트 메시지 관련 상태값이 변경되었을 때 이를 구독하고 있는 가 호출될 수 있게 리액트의 Context를 사용했습니다. 이 글에서는 리액트의 Context를 사용해서 토스트 메시지를 구현하는 방법과 Context를 사용했을 때 불필요한 렌더링이 발생하지 않도록 최적화하는 방법을 다루고 있습니다.ContextContext는 리액트 컴포넌트간 어떠한 값을 공유할 수 있게 해주는 기능입니다. 어떠한 값이란 원시 타입의 값일 수도 있고 객체일 수도 있습니다. 리액트에서 Context를 사용하는 이유는 대부분 애플리케..