[React] 함수를 상태에 저장하기

🎈 상황

리액트의 상태로 함수를 저장해야하는 경우가 생겼다. 여느 상태 저장과 마찬가지로 아래와 같이 코드를 구현하였다. 

아래는 버튼을 클릭하면 state이라는 값을 fn 상태에 저장하는 간단한 기능이다.

const App = () => {
  const [fn, setFn] = useState(null);
  
  const handleClick = () => {
    const state = () => {
      console.log('함수저장');
    };
  
    setFn(state);
  };
  
  return <button onClick={handleClick}>버튼</button>
}

 

하지만 위의 코드를 실행 후 fn에는 undefined만 저장 되어있고, 함수를 호출하지 않았는데 console이 호출 되는 현상이 발생하였다.

 

 

📯 원인 파악

문제의 원인은 바로 set 함수에는 값을 직접 전달하거나 또는 콜백함수를 전달받을 수 있다는 것을 망각한 것이다.

 

아래의 코드를 많이 보았을 것이다.

const [form, setForm] = useState({
  name: '',
  password: '',
});

const handleChange = (e) => {
  setForm((prev) => ({
    ...prev,
    [e.target.name]: e.target.value,
  }));
};

 

함수를 상태로 관리하는 경우가 적다보니 이 부분에 대해서 놓치고 말았다.

 

 

🛒 함수 저장하기

그렇다면 함수를 저장할 땐 어떻게 해야할까?

 

바로 위에서 언급한 콜백함수를 활용한 방법이다. 아래와 같이 호출하는 경우 콜백함수 내에서 반환 된 화살표 함수가 fn 상태에 저장되게 된다.

setFn(() => () => {});