[React Hook] 2. Hooks (useReducer , useContext)

1. useReducer

useContext는 useState보다 다양한 상황에서 state를 업데이트를 할 때 사용한다.

기존 Counter를 reducer를 이용해 만들어보자.

 

const [state, dispatch] = useReducer(reducer, { value: 0 });

state, dispate의 용도는 useState와 동일하다. 하지만 useReducer의 파라미터는 두개가 되는데, 첫 번째는 호출 시 실행하게되는 함수이고, 두 번째는 초기화 값이다.

아래 온클릭에서 dispatch안에 파라미터로 type: 'INCREMENT'를 넘겨줬고, 그럼 가전에 정의한 reducer라는 함수가 실행되고 해당 함수의 return이 state가 된다.

 

관리해야할 state가 2개 이상이거나 엘리멘트의 value값을 사용하는 경우는 아래와 같이 작성할 수 있다.

 

state 안에 값이 name과 nickname으로 두개이며, input 엘리멘트 안에 name이 키가되고 value가 값이되어 onChange함수에에서 dispatch를 실행하고 reducer 함수에서는 입력맏은 엘리맨트의 name을 키로, value를 값으로 셋팅해 리턴 해준다.

 

2. useContext

useContext는  컨텍스트를 보다 쉽게 관리해줄 수 있게 해준다.

검정색 사각형이 나타난것을 볼 수 있다.