TIL - 30 : Custom hook

13 Apr 2022 in Study Log on Today I learned

Custom hook

---

• 관심사의 분리 (Separation of Concerns) - SOC

• 관심사의 분리가 적절히 구현된 코드가 유지보수하기 좋음
  • 코드가 더욱 명료해짐
  • 코드의 재사용성이 올라감
  • 테스트 코드를 작성하기 쉬워짐
• Custom hook 원리

  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;
}

• 커스텀 훅은 무조건 use 로 시작 (리액트에서 정한 컨벤션)

• 커스텀 훅의 return은 배열과, 객체형으로 내보낼 수 있음

  • 객체는 정해진 이름으로 사용
  • 배열은 사용시에 이름을 마음대로 정할 수 있음