custom hook으로 코드 재사용하기

1.custom hook이 뭔데요?

react의 유용한 기능 : hook
hook을 이용하여 재사용 가능한 함수로 정의해놓은 것 : custom hook.
js의 함수의 일종.

2.함수명에 use를 붙여주자

useState, useEffect 등의 코드를 담고있는 함수 작명할 때는 use를 붙여야 함. 강제임.

3.제가 왜 그래야하죠?

useState, useEffect 이런 코드들은 항상 컴포넌트 함수 안에서만 사용가능.
실수로 html 안에 넣거나 if문 안에 넣거나 그러면 큰일나기 때문에 그런 상황을 방지하기 위해서 useState 이런 코드가 담겨있는 함수들도 이름을 use어쩌구로 짓는걸 강제함.

4. 예시코드

좋아요 코드 여기에 적기.

//hooks/useLike.js

export function useLike(){
  let [like, setLike] = useState(0)
  function addLike(){
    setLike((a) => { return a + 1 })
  }

  return [like, setLike]
} 

//Detail.js

function Detail(){
  let [a, b] = useLike()
  
  return (
    (생략)
    <h4>{a}</h4>
    <button onClick={()=>{ b() }}>❤</button> 
  )
}

5. 오늘의 숙제

커스텀 훅을 만들어, 서버에서 이름을 가져와 html에 보여주는 코드를 작성하기.
하지만 서버가 없기 때문에 public 폴더에 username.json 파일을 만들어두고
그 파일엔 "Kim"이라는 단어하나를 저장.
/username.json으로 GET 요청하여 "Kim"을 가져오기.
리액트쿼리 한번 사용해봐도 괜찮을듯.