Custom Hooks

• 컴포넌트를 사용하다 보면 여러 종류의 State와 Effect가 금방 뒤섞여 기능들을 알아보지 못하는데, Custom Hook을 사용해 각각의 로직들을 컴포넌트로부터 분리할 수 있다

관심사의 분리(Separation of Concerns)

• 동일한 관심사의 코드끼리 모일 수 있도록 각각 분리하는 행위

Custom Hooks

• 이름이 use로 시작하는 JS함수
• Custom Hook을 사용하면 지금까지 컴포넌트 내부에 한 덩이로 결합하여 사용했던 State와 Effect를 다음과 같이 분리하여 사용할 수 있다

//분리전
const UserList = ({ users }) => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetchUsers("/users")
      .then(res => res.json())
      .then(res => setUsers(res.users))
  }, [])
	
  return (
    <ul>
      {users.map(user => {
	return <li key={user.id}>{user.name}</li>
      })}
    </ul>
  )
}

// 분리후
const UserList = ({ users }) => {
  // Logic
  const users = useGetUserList()
	
  // View
  return (
    <ul>
      {users.map(user => {
	return <li key={user.id}>{user.name}</li>
      })}
    </ul>
  )
}

-------------------
  const useGetUserList = () => {
  const [users, setUsers] = useState([])

  useEffect(() => {
    fetchUsers("/users")
      .then(res => res.json())
      .then(res => setUsers(res.users))
  }, [])

  return users;
}

• Custom Hook의 이름은 use로 시작되어야 한다
• Hook안에서 다른 Hook을 호출 할 수 있다
• 같은 Hook을 사용하는 두개의 컴포넌트는 state를 공유하지 않는다