[React.js Hooks] useState, useEffect, useReducer

---

useState

기본 Hook에 속하는 useState. 상태 유지 값과 그 값을 갱신하는 함수를 비구조화 할당을 통해 반환한다. 처음 렌더링이 된 시점에 반환된 state 값은 useState이 두 번째 인자 값과 같다.

코드 상단에 useState를 import해준 뒤, 함수형 컴포넌트 내부에 const \[value, setValue\] = useState(0); 로 value의 초기 상태값을 useState의 파라미터를 통해 0으로 초기화해준다. 이후, +1, -1이라는 버튼을 클릭했을 때는 setValue 함수를 통해 기존 value에 1을 더한 값을 파라미터로, 상태를 업데이트해준다. setValue 함수는 새로운 state 값을 인자로 받아 컴포넌트 Re-rendering을 시킨다. 이후 렌더링된 state 값은 업데이트된 state 값이다.

useState는 필요한 만큼 선언해 사용할 수 있고, useState 문법이 낯설다면 비구조화 할당(Destructuring Assignment)에서 확인할 수 있다. -> Reference의 링크 확인

useEffect

 

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 (다양한 조건 하에) 특정 작업을 수행하도록 해주는 Hook이다. 클래스형 컴포넌트에서 componentDidMount나 componentDidUpdate를 합친 상태이다. (따라서 다양한 조건으로 useEffect를 다르게 실행할 수 있는 것이다.)

 

위 코드에서는 렌더링 이후 'Rendered'라는 문구가 출력되도록 했다. 렌더링될 때마다 이 문구가 출력될 것이다. 만일 컴포넌트가 처음 렌더링된 시점에만 실행되는 함수를 쓰고자 한다면 (업데이트될 때 해당 작업은 무시된다.) useEffect의 두 번째 파라미터에 빈 배열을 넣어준다.

useEffect(() => {
        console.log('Rendered');
        console.log(name);
    }, []);

처음 렌더링이 될 때만 문구가 출력된다.

처음 렌더링된 이후(즉 컴포넌트가 화면에 마운트된 이후)에 특정 값이 바뀔 때만 실행되도록 하고 싶다면 빈 배열을 삽입하는 대신 Watch하고자 하는 값을 빈 배열에 넣어준다.

useEffect(() => {
        console.log('Rendered');
        console.log(name);
    }, [name]);

이름: 한나, 닉네임: 한나닉네임이라고 타이핑을 한 이후 화면

콘솔에는 '한나닉네임'이라는 내용은 Watch 되지 않는다.

useEffect로는 cleanup 함수를 쓸 수도 있다. cleanup 함수는 컴포넌트가 unmount 되기 직전, 혹은 업데이트되기 직전에 수행하는 작업을 말하고, return을 통해 반환한다.

 

위 코드에는 'cleanup'이라는 문구를 콘솔에 출력하는 cleanup 함수가 반환되고 있다. update될 때마다 cleanup을 하고 싶지 않다면(=unmount 시에만 동작하고자 한다면) 아까처럼 useEffect hook의 두 번째 파라미터에 빈 배열을 삽입한다.

useReducer

Redux를 공부할 때도 등장하는 Reducer. Redux가 상태 관리 라이브러리인 만큼 useReducer Hook도 여러 상태를 다양한 상황에서 다른 값으로 업데이트하고자 할 때 쓰인다는 개념이다. useReducer는 현재 상태를 말하는 state, 업데이트를 동작시키기 위한 action, 그리고 이 액션을 발생시키는 dispatch가 필요하다. 현재 상태를 유지하고, 바뀌는 여러 상태를 추적 및 관리하기 위해 action이라는 개념이 존재한다. Vue를 공부할 때 Vuex에서 mutation, commit 등의 개념이 등장했던 것과 비슷하다.

 

가장 처음 useState를 이용해 Counter를 구현한 것을 useReducer로 구현할 수 있다.

 

CounterReducer 함수형 컴포넌트 아래의 useReducer 함수 첫 번째 파라미터에는 작성한 reducer 함수, 두 번째 파라미터에는 초기값 선언이 들어간다. 이를 통해 state, dispatch를 받아와 선언할 수 있다. dispatch는 앞서 언급한 것처럼 액션을 발생시킨다. dispatch(action)처럼 사용되며, 실행 시 Reducer 함수가 호출된다.

 

useReducer를 사용하면 컴포넌트 업데이트 로직을 컴포넌트 외부로 빼내 작성할 수 있다는 장점이 있다. 또 단일한 문자나 숫자 같은 단순 데이터 이외의 보다 복잡한 데이터를 관리하기 쉬워진다. 이를 위해 useEffect 예제를 위해 작성한 Info.js 컴포넌트로 돌아가보자.

 

InfoReducer 컴포넌트 외부에 state, action을 갖는 reducer 함수를 작성했다. rest ... syntax를 써서 기존의 state를 가지고 오고 있다. action의 name은 key에, value는 value에 할당한다.

 

InfoReducer 컴포넌트 내부에서 useReducer는 reducer를 첫 번째 파라미터로 가지며, 두 번째 파라미터에 객체 내 name, nickname의 초기값을 각각 빈 문자열로 선언해준다.

 

기존 Info 컴포넌트는 input의 개수에 따라 onChange 이벤트를 각각 따로 만들어주었지만, useReducer를 사용해 코드를 보다 짧게 줄여 깔끔하게 적을 수도 있다. dispatch(action) 형태로 작성하고, action을 발생시키는데, 여기에 e.target, 즉 input 이벤트가 발생하는 target 자체를 action으로 삼고 있다.

 

컴포넌트 외부에서 상태 관리를 위해 존재하는 useReduce. 이 훅을 이용하면 다른 파일에 상태 업데이트 로직구현하고, 이를 불러 와 사용하는 것도 가능해진다.

 

• 관습적으로 action은 주로 type 값을 가진 객체 형태로 사용하고, type은 대문자로 구성된다. 위의 CounterReducer.js 소스에서도 INCREMENT 처럼 대문자로 작성되었다.
• 컴포넌트에서 관리하는 값이 하나라면, 그리고 그 값이 단일한 문자열이나 숫자라면 useState가 낫다.
• 하지만 여러 개의 하위값을 갖는 복잡한 구조의 데이터라면 useReducer가 상태 관리에 더 낫다.

Reference

velog.io/@velopert/react-hooks
비구조화 할당_모던 자바스크립트_튜토리얼
Hooks API Reference