이제 사용자 정의, 즉 커스텀 훅의 개념을
배워보기 전에
훅의 규칙에 대해 복습해보겠습니다
크게 두 가지 중요한 규칙이 있는데
리액트에서 훅을 사용할 때 주의하셔야 할 점은
그리고 첫 번째 규칙은 리액트 훅은
리액트 컴포넌트 함수 안에서만 사용해야 한다는 겁니다
두 번째 규칙은 이 훅들이
if 조건 중첩 함수에 중첩되어서는 안 된다는 것입니다
즉 루프나 비슷한 모든 것에 말입니다
하지만 이제 그 첫 번째 규칙을 조금 바꿔보도록 하겠습니다
왜냐하면
그 첫 번째 규칙은 조금 더 유연하고
사실 컴포넌트 함수 안에서만 사용할 수 있도록
제한적이지 않기 때문입니다
사실 다른 훅, 그러니까 다른 커스텀 훅
안에서 사용할 수 있습니다
그러니 훅은는 컴포넌트 함수나
다른 훅 안에서 사용될 수 있습니다
그건 첫 번째 규칙의 중요한 변형이며
이 변형이 사용자 정의 훅을 만들 수 있게 해주는데
이 섹션을 통해 잘 배워보도록 하겠습니다
하지만 우리는 왜 커스텀 훅을 구축하고
이 커스텀 훅은 무슨 역할을 할까요?
커스텀 훅을 구축하는 이유는
컴포넌트 함수에 들어가는
코드를 항상 감싸고 재사용하기 위함입니다
예를 들어 이 앱 파일(App.jsx) 안을 보겠습니다
제가 제공해준 프로젝트에 있습니다
거기서 이 useEffect 훅을 받았습니다
그걸로 http 요청을 보내고
loading 상태를 관리하고
필요할 땐 error 상태도 관리합니다
그리고 여기 이 코드와
이 코드도 자세히 보면
AvailablePlaces.jsx 파일 안에 있는데
코드가 꽤 비슷하다는 걸 볼 수 있습니다
완전히 똑같지는 않지만
각 URL들에 다른 요청들을 보내고 있습니다
이 AvailablePlaces 안에서 일어나는 일입니다
그리고 돌려받은 데이터를 변환합니다
하지만 주요 개념은 같습니다
HTTP 요청을 보내고
loading 상태를 관리하고
error 상태도 관리하고
그걸 위해 useEffect를 사용하고 있죠습니다
그리고 이건 우리가 외부로 내보내려는
코드의 예시가 될 수 있습니다
그리고 좀 더 일반화하여 재사용할 수 있게 하고
비슷한 코드를 두 개의 다른 컴포넌트에 두번
쓰지 않도록 해 주고, 대신
재사용이 가능하고 설정을 바꿀 수 있는 하나의 함수를
두 함수에 사용하는 것입니다
왜냐하면 당연하게도
컴포넌트의 개념은
로직과 jsx 구조를 재사용하는 것이고
여기 모달에서도 그렇게 했습니다
예를 들어 이 컴포넌트를 다른 데이터로 재사용합니다
이것이 컴포넌트의 개념이었으며
다른 코드도 재사용하고 싶습니다
예를 들어 jsx 코드를 반환하지 않는 코드 말이죠
그래서 그게 자신의 컴포넌트로 가지 못하게 합니다
예를 들어 이런 코드입니다
이 로직 안에 있는 useEffect 호출을
재사용하고 싶다고 하겠습니다
하지만 이것만 따로 분리된 컴포넌트에 넣을 수 없습니다
이건 그냥 컴포넌트의 일부이기 때문입니다
jsx 코드 같은 것을 반환하지 않으며
이것이 바로 커스텀 훅을 사용해
해결할 수 있는 문제입니다
이제 물론, 할 수 있는 건
코드를 이런 식으로 내보내서 재사용하는 것입니다
따로 분리된 함수에 넣어주는 방식입니다
함수는 fetchData라고 불러주고
아무 파일에나 정의할 수 있습니다
그리고 이 fetchData를
어떤 컴포넌트든 그 기능을 필요로 하면 불러줍니다
그게 보통 프로그래밍에서 로직을
내보내는 방법입니다
그리고 자바 프로그래밍에서도 물론 예외는 아닙니다
여러 곳에서 사용해야 하는 로직이 있으면
그걸 함수로 만들어서
그 함수를 여러 곳에서 사용하는 겁니다
이 fetchUserPlaces 함수를 만들어뒀는데
이 안에 있는 재사용할 수 있는 코드로
userPlaces 데이터를 fetch할 수 있습니다
하지만 여기선 작동하지 않을 겁니다
왜냐하면 제가 내보내서 공유하고 싶은 코드는
그 안에 있는 훅을 사용하고
상태도 따로 조정해야 하기 때문입니다
그리고 이런 것들은 컴포넌트 안에서만
이루어질 수 있고, 그냥 아무 함수에서나 동작할 수는 없습니다
여기선 컴포넌트 안에서 이 함수를 쓰고 있습니다 만
하지만 이 fetchData를 컴포넌트에서만 쓰고
다른 곳에선 쓰지 않을 거란 보장이 없습니다
그리고 만약에 다른 곳에서 사용한다면
이 코드는 전부 실패할 것입니다
훅은 컴포넌트 내에서나
상태 업데이트에서만 사용될 수 있기 떄문에
오로지 컴포넌트 함수 안에서만 생성될 수 있습니다
그러므로 이게 유효한 해결책이 될 수 없으며
이게 제가 이 코드를 복구해서
그 전의 코드로 되돌린 이유입니다
그리고 그게 정확히 왜 이 커스텀 훅이 필요한 이유입니다
이 섹션에서 더 설명드리겠지만
커스텀 훅은
다른 여러 곳에서도 부를 수 있는 함수이기 때문입니다
하지만 그와 동시에 유효한 곳에서 사용되기를
보장 받아야 합니다
그러므로 결국 컴포넌트 내에서 사용되도록 보장되는 것입니다