공부하자

이어지는 글 https://5ffthewall.tistory.com/72 [React] recoil로 전역 상태 관리하기 https://5ffthewall.tistory.com/71 [React] 리액트 context API의 리렌더링 방지를 통한 성능 최적화 하기 / useMemo 사용하기 https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context 5ffthewall.tistory.com recoil의 개념을 담은 글이다! 개념에서 더 나아가 간단한 예제를 만들어 사용법에 익숙해지고자 한다. Recoil을 사용하여 간단한 할 일 목록 애플리케이션 만들기 0. 예제 파일 생성 npm create-reac..

https://5ffthewall.tistory.com/67 [React] 리액트 context API로 상태 관리 하기 Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 5ffthewall.tistory.com 위 글과 같이 context API로 전역 상태를 관리하는 코드를 작성한 적이 있다. 하지만 이 코드에는 문제점이 있는데 바로 Provider의 상태가 변했을때 이를 구독하고 있는 컴포넌트의 경우 일제히 리렌더링이 일어난다는 문제이다. 하위 컴포넌트의 개수가 많아지거나 프로젝트의 규모가 커지면 불필요한 리렌더링이 많아지면서 ..

Context API란? Context API는 React에서 전역적인 상태를 관리하고 컴포넌트 간에 데이터를 전달하는 데 사용되는 기능이다. 이를 통해 props 전달이 깊은 컴포넌트 트리를 통해 이루어지는 것을 피할 수 있다. Props Drilling Problem을 해결하기 위해 생김! 컴포넌트 트리에서 Context라는 거대한 공통 조상을 만들고 그 Context로 부터 데이터를 제공을 받는 방식이다. 별도의 Store을 가지고 있는 FLUX와 비슷한 느낌이 있어서 최근에는 복잡한 문법을 가지고 만들어야 하는 Redux보다는 React의 기본 기능인 Context API를 쓰겠다는 움직임이 생기고 있다고 한다. Context API의 핵심 개념 Context: Context는 React 컴포넌트..