그럼 어떻게 이것을 커스텀 훅에
작업을 의탁할 수 있을까요?
새로운 폴더를 만들겠습니다
src 폴더 안에서 만들고 이름은 hooks로 지어줍니다
이건 물론 선택사항입니다
폴더를 생성하지 않아도 되고
이름도 여러분 마음대로 지어도 무관합니다
제가 만드는 이유는 그저 이 프로젝트에
구조를 만들어 주고 싶었기 때문입니다
그럼 이제 그 안에 useFetch.js라는 파일을 추가할 수 있습니다
이 이름도 임의로 지으시면 됩니다
그리고 이 표기가 조금 이상해보일 수 있습니다만
그럼 이것도 여러분 마음대로 하시면 됩니다
이것도 use-fetch로 짓거나 그냥 fetch로 지으셔도 됩니다
저는 이렇게 useFetch라고 지어주겠습니다
이 이름이 생성하려는 훅과도
동일하게 사용될 겁니다
그리고 왜 use로 시작하는지 잠시 후에 설명해드리도록 하겠습니다
일단, 이제 이 useFetch.js 파일 안에서
커스텀 훅을 생성할 수 있습니다
그냥 기본적인 함수를 만들면 됩니다
하지만 이제 중요한 건
함수가 use로 시작해야 한다는 건데
그것이 약속이기 때문입니다
그리고 리액트 프로젝트의 규칙 상
use로 시작하는 함수는 훅으로 인식되며
리액트 프로젝트는 특별히 use로 시작하는 함수를 찾아서
그 함수들에 특정 규칙을 부여하기 때문입니다
예를 들어 앱 파일(App.jsx)에서
제가 내장 useState 훅을 여기 다른 코드와 중첩하여
사용하려고 하면
에러가 발생하는 게 보입니다
빨간 줄이 생기고
리액트 훅는 꼭 리액트 함수나 사용자 정의 함수 내에서
호출되어야 한다고 뜹니다
제가 이전에 설명드린 내용입니다
하지만 이건 유효한 자바 코드입니다
왜냐하면 useState는 그저 함수일 뿐이며
이론적으로는 함수를 어느 곳에서든 호출할 수 있기 때문입니다
이건 프로젝트 환경에서 강제적으로 부여한 규칙이고
오직 이 함수의 이름 때문에
적용된 것입니다
왜냐하면 이 프로젝트는
다른 리액트 프로젝트들이 설정된 것처럼
use로 시작하는 함수들은
훅으로 인식하게 되어 있습니다
그리고 이 훅에 관한 규칙들은
그 함수들에 적용됩니다
이 함수를 잘못된 곳에서 사용하려 하면 에러가 발생합니다
그래서 여러분의 커스텀 함수도
use로 시작해야 그 규칙들이
그 함수에도 적용이 됩니다
이 규칙들이 중요한 이유는 그게 없으면
훅을 잘못 썼을 때
앱이 먹통이 되거나 잘못 동작할 수 있습니다
하지만 물론 use는 이름의 일부일 뿐입니다
여기 훅 이름을 useFetch로 지어보겠습니다
다시 한 번 말씀 드리지만 이름은 임의로 지으시면 됩니다
주의하셔야 하는 것은
useState나 useEffect처럼 기존 내장 훅과 겹치지 않아야 합니다
이제 이건 훅 함수로 인식되며
이 함수 내에서 다른 훅들을 사용할 수 있습니다
이걸로 예를 들어
이 useEffect 코드를 내보낼 수 있습니다
그걸 useFetch 함수에 복사해서 붙여넣을 수 있습니다
이제 useEffect를
리액트에서 가져와도 리액트가 불만을 표하지 않습니다
여기 우리가 고쳐야 할 것들에는 불만을 표할 것이지만
useEffect를 여기서 사용하는 건 괜찮습니다
만약 이 함수를 use 없이 fetch로만 이름을 지으면
여기 빨간 줄이 생기는 게 보입니다
그리고 이것이 리액트 컴포넌트 함수나
사용자 정의 함수에서만 사용되어야 한다는 에러가 발생합니다
하지만 앞에 use만 붙이면 다 괜찮습니다
하지만 왜 이 코드를 커스텀 훅에 넣는 걸까요?
그리고 이 커스텀 훅는 어떤 식으로 동작해야 할까요?
이것의 의미는 무엇일까요?
결국 이것의 개념은
나중엔 앱 파일(App.jsx)의 useEffect를 없앨 수 있고
대신 여기 커스텀 훅을 사용할 수 있다는 것입니다
그러면 거기 저장된 것들이 내부적으로
다 잘 동작될 것입니다
이제 컴포넌트가 더 간결해졌습니다
그리고 그 똑같은 훅을
다른 컴포넌트에도 사용해 같은 동작을 수행할 수 있습니다
그리고 그건 프로그래밍에서 일반적인 일입니다
함수를 한 번 생성하고 나면
다른 곳들에서 사용하여 실행시킬 수 있다는
개념입니다
그리고 여기서도
useEffect 같은 내장 훅을 사용하는
특별한 조건으로 같은 것을 해줍니다
그래서 커스텀 훅을 만들어야 하는 겁니다
간단하게 use만 앞에 추가해주면 되죠
하지만 물론 이 훅은 끝난 게 아닙니다
이제 이 훅을 기능적으로 만들기 위해
무엇을 더 할 수 있을까요?