[REACT] Context API, useContext hook, Redux

개념

전역적으로 사용할 데이터가 있을 때 사용

 

Consumer

• createContext로 기본 설정 한 값을 사용하는 메소드

Provider

• createContext로 설정한 값 외에 사용하고 싶은 값을 지정할 때 쓰는 메소드
• value 없이 사용 할 경우 기본값도 사용하지 않기 때문에 에러가 난다.

useContext

리액트 내장 훅,

함수형 컴포넌트에서 Context를 쉽게 사용할 수 있다.

 

Redux

가장 많이 사용하는 리액트 상태 관리 라이브러리

Context API의 상위 버전 쯤으로 생각하면 될 것 같다.

상태를 더욱 체계적으로 관리하고 유지보수도 수월하다.

꼭 리액트 안에서만 써야하는 것도 아니다.

 

 

Redux의 구성

1. 액션
2. 액션 생성 함수
3. 리듀서
4. 스토어
5. 디스패치
6. 구독

Redux 세 가지 규칙

1. 단일 스토어
2. 읽기 전용 상태
3. 리듀서는 순수한 함수
   1. 리듀서 함수는 이전 상태와 액션 객체를 파라미터로 받는다.
   2. 파라미터 외의 값에는 의존하면 안된다.
   3. 이전 상태는 절대 건드리지 않고, 변화를 준 새로운 상태 객체를 만들어 반환한다.
   4. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과 값을 반환해야 한다.

 

 

 

여담

onClick : 마우스 왼쪽 클릭

onContextMenu: 마우스 오른쪽 클릭, e.preventDefault()를 사용하면 오른쪽 클릭해도 기본 메뉴가 나오지 않는다.