학습 공간 개념 · 판단 · 실험

Fanta Lab

질문 73 · 실전 면접 답변

함수 컴포넌트와 custom Hook의 장점은 무엇인가요?

이렇게 답해 보세요 (핵심 답변)

함수 컴포넌트는 props로부터 UI를 계산하는 흐름을 간결하게 표현할 수 있고, custom Hook을 통해 상태와 외부 동기화 로직을 UI 마크업과 분리해 재사용할 수 있습니다. 클래스 컴포넌트에서는 하나의 기능을 구현할 때 여러 수명주기 메서드에 코드가 흩어지기 쉬웠다면, Hook을 사용하면 관심사별로 응집도 있게 묶을 수 있습니다. 다만 클로저 스냅샷과 의존성 배열 규칙을 정확히 이해하고 써야 하며, 함수로 작성했다는 이유만으로 실행 속도가 자동으로 빨라지는 것은 아닙니다.

함께 설명하면 좋은 이유 (꼬리질문 대비)

  1. 재사용 단위를 고차 컴포넌트 래퍼 대신 일반 함수 조합 형태로 설계할 수 있어 트리 구조가 단순해집니다.
  2. 클래스의 this 바인딩 이슈가 사라져 이벤트 핸들러 전달 시 발생할 수 있는 실수를 줄일 수 있습니다.

면접에서 자주 하는 실수

같은 custom Hook을 여러 컴포넌트에서 호출하면 그 안의 state까지 자동으로 전역 공유된다고 오해해서는 안 됩니다.

원리와 예제까지 읽기

공식 참고 자료

질문 목록 출처 ↗ · 원본 73번을 바탕으로 질문과 답변을 새로 정리했습니다.

← React