[React] Hooks - useEffect, useMemo, useCallback

useEffect( cb함수, [deps]);

useEffect( () => {} , []);

마운트/언마운트 시

컴포넌트가 처음 나타날때에만 cb함수를 호출한다.

주로 마운트시에
- props 로 받은 값을 컴포넌트의 로컬 상태로 설정
- 외부 API 요청 (REST API 등)
- 라이브러리 사용 (D3, Video.js 등...)
- setInterval 을 통한 반복작업 혹은 setTimeout 을 통한 작업 예약

주로 언마운트시에
- setInterval, setTimeout 을 사용하여 등록한 작업들 clear 하기 (clearInterval, clearTimeout)
- 라이브러리 인스턴스 제거

useEffect( () => {} , [deps]);

컴포넌트가 처음 마운트 될때, deps안의 특정 값이 변경되기 직전과 언마운트와 변경 될 때 발생한다.

• useEffect 안에서 사용하는 상태나, props 가 있다면, useEffect 의 deps 에 넣어주어야 합니다. 그렇게 하는게, 규칙입니다.
• 만약 useEffect 안에서 사용하는 상태나 props 를 deps 에 넣지 않게 된다면 useEffect 에 등록한 함수가 실행 될 때 최신 props 상태를 가르키지 않게 됩니다.

import React, { useEffect, useState, useRef } from 'react';

function UserList({users,setUsers}) {
    useEffect(() => {
        console.log('user 값이 설정됨');
        console.log(users);
        return () => {
          console.log('user 가 바뀌기 전..');
          console.log(users);
        };
      }, [users]);

    const onRemove=(id)=>{
        setUsers(users.filter(user => user.id !== id));
    }
    const onToggle=(id)=>{
        setUsers(users.map(user=>
             user.id === id ? {...user,active:!user.active} : user))
    }
    return(
        <>
            {users.map((user,index)=>(
                
                <div key={index}>
                    <b style={{color : user.active ? 'blue':'black'}} onClick={()=>onToggle(user.id)}>{user.username} </b>
                    <span>{user.email}</span>
                    <button onClick={()=>{onRemove(user.id); console.log("onclick",users)}}>REMOVE</button>
                </div>
            ))}
        </>
    )
}

export default UserList;

UserList.js:5 user 값이 설정됨
UserList.js:6 (3) [{…}, {…}, {…}]
(( REMOVE 버튼 누름))
UserList.js:27 onclick (3) [{…}, {…}, {…}]
UserList.js:8 user 가 바뀌기 전..
UserList.js:9 (3) [{…}, {…}, {…}]
UserList.js:5 user 값이 설정됨
UserList.js:6 (2) [{…}, {…}]

useEffect( () => {});

deps 배열 없음

컴포넌트가 리렌더링 될 때마다 호출된다.

기본적으로

부모 컴포넌트가 리렌터링 되면 자식 컴포넌트도 리렌더링 됨

useMemo( ()=> , [deps])

특정 결과값을 재사용 할 수 있다.

    const count = useMemo( ()=> countActiveUsers(users), [users] );

deps인 users값이 변경된 경우에만 엠나 이 함수를 호출해서 계산하고
변경되지 않은 경우엔 그전에 계산한 값을 재사용한다.

useCallback ( (arg)=>{~ } , [deps])

특정 함수를 재사용 할 수 있다.
함수를 한번만 만들어두고 필요할 때만 재사용 하도록.

기존선언에

const onRemove = id => {
  setUsers(users.filter(user => user.id !== id));
};

useCallback형태로 추가해주면 된다.

  const onRemove = useCallback( id => {
      setUsers(users.filter(user => user.id !== id));
    },
    [users]
  );

⚠️ React Hook useCallback has a missing dependency: 'setUsers'. Either include it or remove the dependency array. If 'setUsers' changes too often, find the parent component that defines it and wrap that definition in useCallback.
💡useCallback 사용할 때 주의!
props 중 사용할 값이 있다면 꼭 deps에 넣어주어야한다.
또한!!!! props로 받아온 함수도 넣어야 한다.

// (?)
useState는 함수형 업데이트

const [todo, setTodo] = useState({
  text: 'Hello',
  done: false
});

const onClick = useCallback(() => {
  setTodo(todo => ({
    ...todo,
    done: !todo.done
  }));
}, []);

에서처럼 setTodo에 업데이트를 해주는 함수를 넣음으로써 useCallback 두번째 파라미터 deps에 todo를 넣지 않아도 됨.