<aside> <img src="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" alt="https://s3-us-west-2.amazonaws.com/secure.notion-static.com/f765100f-b481-437e-b531-5aae8d9bc5fe/1200px-React-icon.svg.png" width="40px" /> React Hook을 공부하면서 기록합니다.

</aside>

01. 당연하지만서도 의존성 배열에 의존되는 값을 빠짐 없이 잘 넣자!

function Profile({ userId }) {
  const [user, setUser] = useState();
  useEffect(() => {
    fetchUser(userId).then((data) => setUser(data)); // -> 서버에 유저 정보 호출
  }, [userId]); // -> 유저 정보 변경시 부수효과가 발동을 해야 함으로 userId를 deps에 넣어준다.
  // ..
}

• **[deps]**라고 하는 의존성 배열에 이 useEffect 훅에 등록한 부수 효과 함수가 사용하는 의존 값들을 넣지 않으면 끔찍한 결과가 나올 것이다. 왜냐하면 컴포넌트가 마운트 됨으로 인해 부수 효과가 발동되는데, 내부 부수 효과 함수는 계속 이전의 값을 기억할 것이기 때문이다.
• 그래서 CRA를 통한 리액트 프로젝트에는 기본적으로 ESLint 설정으로 의존성 값을 체크하는 조건이 달려있다.

02. 외부 함수가 useEffect에서 사용된다면?

정답은 당연하게도 의존성 배열(deps)에 넣어 준다 이다.

export default function Profile({ userId }) {
  const [user, setUser] = useState();

  const fetchAndSet = useCallback(async () => {
    const data = await fetchUser(userId);
    setUser(data);
  }, [userId]);

  useEffect(() => {
    fetchAndSet();
  }, [fetchAndSet]); // -> 내부에서 사용된 외부 함수를 deps에 넣어주자!
}

• 컴포넌트가 렌더링 될 때마다 fetchAndSet 함수가 재생산 될 필요는 없어서 useCallback 훅을 사용했다.

03. 의존성 배열을 입력하지 않을 수 있다면 없이 사용하도록 하자

• useEffect 내부의 부수 효과 함수 안에서 함수 실행 시점을 조절하는 로직을 구성하자.

  const [user, setUser] = useState();
  useEffect(() => {
    if (!user || user.id !== userId) {
      fetchAndSet()
    } // -> state에 따른 내부 부수효과 함수 실행 시점 조절
  })
  

• useState에 등록한 상태값 변경 함수 내부에 '함수'로직을 입력하면 의존 값을 지정하지 않아도 된다.

  const [count, setCount] = useState(0) // -> setCount 내부를 함수로!
  useEffect(() => {
  	const onClick = () => { 
  		setCount(prev => prev + 1); // -> 이렇게 하면 이전값을 기억하여 사용한다.
  	}
  	...
  });
  

  setCount 함수 내부의 prev 인자에 이전 상태값이 들어오기 때문에 관리가 더욱 용이하다.