커스텀 훅

Custom Hook

1. 커스텀 훅은 왜?

관심사의 분리

코드를 처음부터 잘 작성하더라도 다양한 이유로(ex. 기획의 변화, 디자인 변경, 요청 사항 추가) 개발 기간 동안 적어도 한번은 처음과는 다른 조건과, 상황에 대응하도록 수정해야 할 필요성이 생긴다.

-> 여러가지 문제를 한번에 해결하도록 단위를 짜는 것이 아니라 한가지 문제만 해결하도록 단위를 잘게 짜도록 한다

장점

• 코드의 명료화
• 코드의 재사용성 용이
• 유지 보수의 용이
• 테스트 코드 작성이 쉬움

2. 커스텀 훅

view와 Logic의 분리

Presentational Component : UI Only 컴포넌트

state, effect등 로직 없음 -> 화면을 렌더링하는데 필요한 코드만 존재

const UserList = ({ users }) => {
  return (
    <ul>
      {users.map((user) => {
        return <li key={user.id}>{user.name}</li>;
      })}
    </ul>
  );
};

Container Component : Logic Only 컴포넌트

데이터 호출, state, 필터링 등 로직을 처리하는 코드만 존재(UI 관련 코드 X)

const UserListContainer=()=>{
  const [users,setUsers] = useState('');


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

  render() {
    return <UserList users={users}>
  }
}

View와 Logic을 분리함으로써 컴포넌트는 더 작은 영역에 대해 더 확실한 책임을 지는 여러 개의 컴포넌트로 분할된다.

개발을 하다 보면 가끔 상태 관련 로직을 컴포넌트 간에 재사용하고 싶은 경우가 생깁니다. 이 문제를 해결하기 위한 전통적인 방법이 두 가지 있었는데, higher-order components와 render props가 바로 그것입니다. Custom Hook은 이들 둘과는 달리 컴포넌트 트리에 새 컴포넌트를 추가하지 않고도 이것을 가능하게 해줍니다. - 리액트 공식 문서-

예시

프로젝트를 진행하다 보면 데이터를 받아오는 부분이 많은데 로직을 일일히 다 작성하는 것이 아니라 useFetch라는 커스텀 훅을 만들어 코드의 중복을 줄이고 재사용성을 높일 수 있다.

import {useState, useEffect} from 'react';
import axios from 'axios';

const useFetch =(url)=>{
    const [url, setUrl] = useState(url);
    const [data, setData] = useState('');

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

    const fetchData =async ()=>{
        const fetch = await axios.get(url);
        setData(fetch.data)
    }

    return data;
}

export default useFetch;

import useFetch from '../hooks/useFetch';

const App()=>{
    const data = useFetch('/list')

    return <div>{data.name}</div>
}