[React] #7 Hooks (1)

useState

useState는 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있도록 한다.

자세한 정리 : https://amor-fati.tistory.com/84

 

useEffect

useEffect는 컴포넌트가 렌더링되거나 사라질 때 특정 작업을 수행할 수 있도록 한다. 또한 컴포넌트의 props나 상태가 바뀌어서 업데이트 될 때 혹은 업데이트 되기 전에도 작업을 하도록 한다.

useEffect(() => {
  (컴포넌트가 생길 때 수행 작업);
  return {
      (컴포넌트가 사라질 때 수행 작업);
  }
}, [의존성])

 

마운트될 때만 실행하고 싶을 때

만약 설정한 함수를 컴포넌트가 화면에 맨 처음 렌더링될 때만 실행하고, 업데이트될 때는 실행되지 않게 하고 싶다면 함수의 두 번째 파라미터에 빈 배열을 넣어주면 된다.

useEffect(() => {
    console.log('마운트될 때만 실행됩니다.');
  }, []);

* 마운트 : 컴포넌트가 나타나는 것 (받아온 props를 객체의 state로 설정해줄 때, REST API로 작업 처리할 때, setInteval, setTimeout 사용할 때)

* 언마운트 : 컴포넌트가 삭제되는 것 (=뒷정리 함수, clearInterval, clearTimeout 사용할 때)

 

특정 값이 업데이트될 때만 실행하고 싶을 때

특정 값이 변경될 때만 함수를 호출하고 싶을 경우, 함수의 두 번째 파라미터로 전달되는 배열 안에 검사하고 싶은 값을 넣어주면 된다.

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

 

useEffect는 기본적으로 렌더링되고 난 직후마다 실행되며, 두 번째 파라미터 배열에 무엇을 넣는지에 따라 실행되는 조건이 달라진다. 컴포넌트가 언마운트되기 전이나 업데이트되기 직전에 어떠한 작업을 수행하고 싶다면 useEffect에서 뒷정리 함수를 반환해주어야 한다.

 

언마운트될 때만 뒷정리 함수를 호출하고 싶다면 두 번째 파라미터에 빈 배열을 넣어주면 된다.

useEffect(() => {
    console.log(‘effect‘);
    console.log(name);
    return () => {
      console.log(‘cleanup‘);
      console.log(name);
    };
  }, []);

 

useReducer

useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용한다. 해당 함수를 사용하면 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있다. 상태 업데이트 로직을 컴포넌트 바깥에 작성 할 수도 있고, 심지어 다른 파일에 작성 후 불러와서 사용 할 수도 있다. reducer 에서 반환하는 상태는 곧 컴포넌트가 지닐 새로운 상태가 된다.

 

여기서 reducer는 현재 상태, 그리고 업데이트를 위해 필요한 정보를 담은 action 값을 전달받아 새로운 상태를 반환하는 함수를 말한다. reducer 함수에서 새로운 상태를 만들 때는 반드시 불변성을 지켜주어야 한다.

function reducer(state, action) {
   return { … }; // 불변성을 지키면서 업데이트한 새로운 상태를 반환합니다.
}

리덕스에서 사용하는 액션 객체에는 어떤 액션인지 알려 주는 type 필드가 꼭 있어야 하지만, useReducer에서 사용하는 action 객체는 반드시 type 값을 지닌 객체 형태로 사용하지 않아도 된다. 또한 객체가 아닌 문자열이나 숫자여도 상관없다.

// 카운터에 1을 더하는 액션
{
  type: 'INCREMENT'
}
// 카운터에 1을 빼는 액션
{
  type: 'DECREMENT'
}
// input 값을 바꾸는 액션
{
  type: 'CHANGE_INPUT',
  key: 'email',
  value: 'tester@react.com'
}
// 새 할 일을 등록하는 액션
{
  type: 'ADD_TODO',
  todo: {
    id: 1,
    text: 'useReducer 배우기',
    done: false,
  }
}

 

useReducer의 첫 번째 파라미터에는 reducer 함수를 넣고, 두 번째 파라미터에는 해당 reducer의 기본값을 넣어준다. 이 Hook을 사용하면 state 값과 dispatch 함수를 받아오는데, 여기서 state는 현재 가리키고 있는 상태고, dispatch는 action을 발생시키는 함수이다. dispatch(action)과 같은 형태로, 함수 안에 파라미터로 액션 값을 넣어 주면 리듀서 함수가 호출되는 구조이다.

const [state, dispatch] = useReducer(reducer, initialState);

 

function reducer(state, action) {
  // action.type에 따라 다른 작업 수행
  switch (action.type) {
    case ‘INCREMENT‘:
      return { value: state.value + 1 };
    case ‘DECREMENT‘:
      return { value: state.value - 1 };
    default:
      // 아무것도 해당되지 않을 때 기존 상태 반환
      return state;
  }
}

const Counter = () => {
  const [state, dispatch] = useReducer(reducer, { value: 0 });
  
return (
    <div>
      <p>
        현재 카운터 값은 <b>{state.value}</b>입니다.
      </p>
      <button onClick={() => dispatch({ type: ‘INCREMENT‘ })}>+1</button>
      <button onClick={() => dispatch({ type: ‘DECREMENT‘ })}>-1</button>
    </div>
  );
};

 

useMemo

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있다. useMemo를 통해 렌더링하는 과정에서 특정 값이 바뀌었을 때만 연산을 실행하고, 원하는 값이 바뀌지 않았다면 이전에 연산했던 결과를 다시 사용하는 방식을 사용하여 불필요한 연산을 줄일 수 있다.

const avg = useMemo(() => getAverage(list), [list]);

 

 

참고 자료 : https://thebook.io/080203/, https://react.vlpt.us,https://velog.io/@uoayop/useEffect-컴포넌트-마운트-언마운트-제어