커스텀훅을 언제 사용하는건지 궁금합니다.
안녕하세요~ 커스텀훅을 만들 때, 커스텀훅 안에도 스프레드 연산자를 넣어서 통합핸들러처럼 사용하면 되는걸까요?
커스텀훅을 훅 파일로 만들어 놓으면, 다른 컴포넌트에서도 비슷한 함수면 가져다 쓰는 용도라고 이해했는데 맞는걸까요?
감사합니다.
답변 2
0
안녕하세요 이정환입니다.
커스텀 훅은 React Hooks를 사용하는 공통 함수를 만들 때 주로 활용됩니다.
강의에서 안내드렸듯 useState, useEffect 등의 React Hooks는 오직 컴포넌트 내부 혹은 커스텀 훅 내부에서만 호출이 가능합니다. 따라서 이런 React Hooks를 사용하는 공통 함수를 만들기 위해서는 일반적인 함수가 아닌 커스텀 훅을 이용해 만들어 주셔야 합니다.
예를 들면 다음과 같은 기능은 커스텀 훅으로 구현해야 합니다.
useEffect를 이용해 컴포넌트의 모든 라이프사이클마다 콘솔에 현재 라이프사이클을 출력
위 기능은 useEffect라는 React Hooks를 사용하고 있기 때문에, 일반적인 함수로는 분리할 수 없습니다. 따라서 이럴 경우 커스텀 훅을 활용해 별도의 함수로 기능을 분리해 재사용성을 높일 수 있습니다.
PS. 추가로 스프레드 연산자 사용 유무는 만들고자 하는 커스텀 훅의 기능에 따라 달라질 수 있습니다.
0
안녕하세요, 인프런 AI 인턴입니다. 조혜정님!
커스텀 훅(Custom Hook)은 React에서 컴포넌트 간에 상태 관련 로직을 재사용하고자 할 때 사용합니다. 일반적으로 반복되는 로직을 컴포넌트에서 떼어내 별도 함수로 정의하고, 필요한 곳에서 그 함수를 호출하여 해당 로직을 재사용할 수 있습니다.
커스텀 훅 내부에서 스프레드 연산자를 사용해 통합 핸들러처럼 쓸 수 있습니다. 예를 들어, 여러 개의 입력 필드가 있는 폼에서 공통의 onChange 핸들러로 상태를 관리하고 싶다면, 커스텀 훅을 작성하여 입력 필드의 상태 변경 로직을 구현할 수 있습니다.
맞습니다. 커스텀 훅을 별도 파일로 작성해두면, 다른 컴포넌트에서 비슷한 역할을 수행하고자 할 때 쉽게 가져다 사용할 수 있습니다. 이렇게 되면 코드의 재사용성이 높아지고, 유지보수도 편리해집니다.
커스텀 훅에 대한 이해를 높이는 관련 질문과 답변 링크를 제공할게요:
- 리액트 커스텀 훅 사용 방법 (가상의 예시 링크)
- 어떤 상황에서 커스텀 훅을 사용할 수 있나요? (가상의 예시 링크)
이 링크들은 커스텀 훅을 어떻게 작성하고 활용할 수 있는지, 그리고 각 케이스에 대한 구체적인 설명을 제공하고 있습니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
useEffect와 lifecycle문의
0
32
2
프론트엔드 학습 수준 문의
0
44
2
리액트 챕터별 코드에서 eslint 설정파일이 없어요
0
51
2
데이터 로딩중 화면만 계속 나와요!!
0
56
2
퍼블리셔일경우 어느정도 수준까지 강의를 들어야할까요
0
80
2
이후의 커리큘럼 문의
0
102
2
실슬환경 설정에서 save후 console.log 부분이 새로고침이 안되는현상입니다.
0
50
2
최적화 관련 질문있습니다 (useMemo 등)
0
85
3
프로바이더 컴포넌트의 위치는 어떤 기준인가요?
1
82
3
Date 객체에 관련하여 질문드립니다.
0
85
2
리액트 개정판 교재 질문
0
60
2
예제코드가 안나와요!
0
78
2
select a variant 선택에서 javascript와 javascript+react compiler 중 무엇을 선택해야하나요? com
0
109
2
onMouseEnter 관련 문의 드립니다
0
93
3
배열의 렌더링 관련 질문 드립니다.
0
73
2
2:40초 refObj를 콘솔로 출력시 오류가 발생합니다.
0
113
2
TS, 리액트 강의중에 뭘 먼저 수강하는게 좋을까요?
0
137
2
useCallback 적용한 onCreate, onUpdate, onDelete 함수..
0
71
1
vs code 자동완성관련 문의
0
113
2
91강 useEffect내에서 상태변화함수 호출시 발생하는 에러
1
181
2
87강 필터 함수 질문
0
69
2
useRef, useState count 비교
0
67
2
안된다고했던 이유가 무엇이었는지 모르겠습니다
0
91
2
85강에서 객체를 왜 클래스로 만들어서 new 하지 않는건지 궁금합니다.
0
76
2