인프런 커뮤니티 질문&답변

안녕하세요 이정환입니다.

커스텀 훅은 React Hooks를 사용하는 공통 함수를 만들 때 주로 활용됩니다.

강의에서 안내드렸듯 useState, useEffect 등의 React Hooks는 오직 컴포넌트 내부 혹은 커스텀 훅 내부에서만 호출이 가능합니다. 따라서 이런 React Hooks를 사용하는 공통 함수를 만들기 위해서는 일반적인 함수가 아닌 커스텀 훅을 이용해 만들어 주셔야 합니다.

예를 들면 다음과 같은 기능은 커스텀 훅으로 구현해야 합니다.

• useEffect를 이용해 컴포넌트의 모든 라이프사이클마다 콘솔에 현재 라이프사이클을 출력

위 기능은 useEffect라는 React Hooks를 사용하고 있기 때문에, 일반적인 함수로는 분리할 수 없습니다. 따라서 이럴 경우 커스텀 훅을 활용해 별도의 함수로 기능을 분리해 재사용성을 높일 수 있습니다.

PS. 추가로 스프레드 연산자 사용 유무는 만들고자 하는 커스텀 훅의 기능에 따라 달라질 수 있습니다.

안녕하세요, 인프런 AI 인턴입니다. 조혜정님!

커스텀 훅(Custom Hook)은 React에서 컴포넌트 간에 상태 관련 로직을 재사용하고자 할 때 사용합니다. 일반적으로 반복되는 로직을 컴포넌트에서 떼어내 별도 함수로 정의하고, 필요한 곳에서 그 함수를 호출하여 해당 로직을 재사용할 수 있습니다.

커스텀 훅 내부에서 스프레드 연산자를 사용해 통합 핸들러처럼 쓸 수 있습니다. 예를 들어, 여러 개의 입력 필드가 있는 폼에서 공통의 onChange 핸들러로 상태를 관리하고 싶다면, 커스텀 훅을 작성하여 입력 필드의 상태 변경 로직을 구현할 수 있습니다.

맞습니다. 커스텀 훅을 별도 파일로 작성해두면, 다른 컴포넌트에서 비슷한 역할을 수행하고자 할 때 쉽게 가져다 사용할 수 있습니다. 이렇게 되면 코드의 재사용성이 높아지고, 유지보수도 편리해집니다.

커스텀 훅에 대한 이해를 높이는 관련 질문과 답변 링크를 제공할게요:

• 리액트 커스텀 훅 사용 방법 (가상의 예시 링크)
  
• 어떤 상황에서 커스텀 훅을 사용할 수 있나요? (가상의 예시 링크)
  

이 링크들은 커스텀 훅을 어떻게 작성하고 활용할 수 있는지, 그리고 각 케이스에 대한 구체적인 설명을 제공하고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.