함수형 컴포넌트

Hooks

useState(초기값)

useState는 state값과 state를 수정하는 함수를 배열 형태로 반환한다. state의 초기값을 useState의 파라미터로 넘겨준다. const [value, setValue] = useState(0);

useEffect(콜백함수[, 의존자배열])

useEffect는 컴포넌트가 리렌더링(업데이트)될 때마다 특정 콜백함수를 실행시킨다.

• 콜백 함수는 컴포넌트가 언마운트 혹은 리렌더링 되기 전에 실행할 cleanup함수를 반환할 수 있다.
• 의존자 배열을 두번째 인자로 두어 특정 state가 변화할 때에만 리렌더링 되도록 할 수 있다. (클래스의 라이프사이클 메서드를 대체)

useEffect(() => {
  console.log(
    "의존자 배열이 비어 있으면 컴포넌트가 최초로 마운드 될 때에만 실행됩니다."
  );
  return () => {
    colsole.log("컴포넌트가 언마운트됩니다.");
  };
}, []);

useEffect(() => {
  console.log("이름이 변경되었습니다.", name);
}, [name]);

useReducer(리듀서함수(state, action), state객체초기값)

useReducer(리듀서 함수, state객체초기값)은 [state, dispatch]을 반환한다.

• dispatch는 리듀서 함수를 호출하여 리듀서 함수의 반환값에 맞게 상태를 변경한다.
• 리듀서 함수는 action을 인자로 받아 변경될 state 값을 반환한다.
• action과 state는 객체의 형태로 주고 받는다.

아래의 예시는 { value: 0 }을 갖는 state에 대해 { type: 'INCREMENT' | 'DECREMENT' } 형태의 action을 dispatch하는 리듀서의 예시이다.

dispatch(액션{타입}) 실행 => 리듀서 함수 호출
=> reducer(actions에 따라 switch~case문을 실행하고 객체를 반환)
=> 반환된 객체에 맞게 state 수정

import React, { useReducer } from "react";

const Counter = () => {
  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 [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;

useReducer를 useState대신 사용하면 state를 객체의 형태로 관리할 수 있다.

function reducer(state, action) {
  return {
    …state,
    [action.name]: action.value
  };
}

event.target을 action객체로 받는다.
이후 state 객체에서 [action.name] 프로퍼티를 오버라이딩 하여 반환한다.

import React, { useReducer } from 'react';


function reducer(state, action) {
  return {
    …state,
    [action.name]: action.value
  };
}

const Info = () => {
  const [state, dispatch] = useReducer(reducer, {
    name: “,
    nickname: “
  });
  const { name, nickname } = state;
  const onChange = e => {
    dispatch(e.target);
  };

  return (
    <div>
      <div>
        <input name="name" value={name} onChange={onChange} />
        <input name="nickname" value={nickname} onChange={onChange} />
      </div>
      <div>
        <div>
          <b>이름:</b> {name}
        </div>
        <div>
          <b>닉네임: </b>
          {nickname}
        </div>
      </div>
    </div>
  );
};

export default Info;