22.03.23(수) Hooks

Hooks?

Hooks는 리액트 v16.8에 새로 도입된 기능으로
1. 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState,
2. 렌더링 직후에 수행할 작업을 설정하는 useEffect 등의 기능을 제공하여
기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해준다.

useState

함수형 컴포넌트에서도 상태 관리를 할 수 있게 해주는 Hook 함수.

사용법

const [value, setValue] = useState(0); 

• useState의 파라미터: 기본으로 설정할 상태 값.
• useState의 반환값: 배열을 반환하며 배열의 첫번째 원소는 상태 값, 두번 째 원소는 상태를 변경하기 위한 setter 함수이다.

사용 예시

import React, { useState } from 'react';
const CounterUseState = () => {
  const [value, setValue] = useState(0);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
export default CounterUseState;

useEffect

리액트 컴포넌트가 렌더링 될 때마다 수행할 작업을 설정 할 수 있는 Hook 함수.

사용법

useEffect(()=> {
  /*렌더링 직후 수행할 작업*/
  return (/*렌더링 직전 또는 언마운트되기 전 수행할 작업*/ );
},[/*검사하고 싶은 값들*/])

useEffect 파라미터: 단계별 수행할 작업을 담은 함수, 검사하고 싶은 값들을 담은 배열
useEffect 반환 값: 렌더링 직전 또는 언마운트 되기 전 수행할 작업을 담은 함수.

사용 예시

import React, { useState, useEffect } from 'react';
const CounterUseEffect = () => {
  const [value, setValue] = useState(0);
  useEffect(() => {
    console.log('카운터 렌더링 완료');
    return () => console.log('렌더링 직전 작업 수행 중');
  }, [value]);
  return (
    <div>
      <p>
        현재 카운터 값은 <b>{value}</b>입니다.
      </p>
      <button onClick={() => setValue(value + 1)}>+1</button>
      <button onClick={() => setValue(value - 1)}>-1</button>
    </div>
  );
};
export default CounterUseEffect;

useReducer

useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 Hook 함수.
리듀서는 현재 state, 업데이트를 위해 필요한 정보를 담은 action을 전달받아 새로운 state를 반환하는 함수이다.
리듀서 함수에서 새로운 state를 만들어서 반환할 때는 반드시 불변성을 지켜주어야 한다.
useReducer의 가장 큰 장점은 reducer 함수를 따로 정의함으로써 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다는 것.

사용법

function reducer (state,action) {
	return 새로운 state;
}
const [state,dispatch] = useReducer(reducer,state의 기본 값);

• useReducer의 반환 값: state, dispatch
• state: 현재 상태
• dispatch: action을 파라미터로 받아 reducer에게 전달해주는 함수.
• reducer: 현재 state와 action을 받아서 새로운 state를 반환하는 함수.

사용예시

import React, { useReducer } from 'react';
function reducer(state, action) {
  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>
  );
};
export default Counter;