React
함수·클래스 컴포넌트와 Hook 규칙
함수 컴포넌트는 매 렌더마다 실행되며 Hook을 통해 상태와 재사용 로직을 연결합니다.
이럴 때 필요해요
기존 클래스 코드를 읽고 새 함수 코드를 작성할 때 수명주기와 값 캡처 방식을 혼동하지 않도록 돕습니다.
어떻게 동작하나요?
화면의 카운터 버튼을 만들 때 함수 컴포넌트는 렌더링될 때마다 함수가 새로 호출되고, 그 시점의 props와 state 값을 클로저로 기억합니다. 반면 클래스 컴포넌트는 하나의 인스턴스를 만들어 this.state와 메서드를 통해 값을 읽습니다. 두 방식 모두 엄연한 React 컴포넌트이므로 흔히 쓰는 '함수형 대 컴포넌트형'보다는 '함수 컴포넌트 대 클래스 컴포넌트'로 부르는 것이 정확합니다.
함수 컴포넌트 안에서 상태를 기억하거나 외부 시스템과 연결할 때는 useState, useEffect 같은 Hook을 사용합니다. React는 컴포넌트 안에서 Hook이 호출되는 '순서'를 보고 각 상태 칸을 찾아 연결합니다. 그래서 일반적인 Hook은 조건문이나 반복문, 이벤트 핸들러 안이 아니라 반드시 컴포넌트나 custom Hook의 최상위에서만 호출해야 합니다. (단, 최신 use API에는 별도 규칙이 적용됩니다)
여러 화면에서 똑같은 카운터나 입력 처리 로직이 필요할 때는 custom Hook으로 묶어 재사용할 수 있습니다. 이때 custom Hook은 상태 값 자체를 전역으로 공유하는 저장소가 아니라 '상태를 다루는 로직'을 복사해 쓰는 템플릿입니다. 신규 코드에는 함수 컴포넌트와 Hook 조합이 권장되지만, 기존 클래스 컴포넌트도 에러 바운더리나 레거시 유지보수에서 여전히 유효하게 동작합니다.
코드 예제
동작을 설명하는 읽기 전용 예제입니다.
function useCounter() {
const [count, setCount] = useState(0);
return [count, () => setCount(c => c + 1)];
}설명용 custom Hook 예제입니다. 이 useCounter를 서로 다른 두 컴포넌트에서 각각 호출하면 두 컴포넌트는 서로 섞이지 않는 독립적인 count 상태를 가집니다.
자주 헷갈리는 포인트
- if 조건문이나 반복문 안에서 useState를 호출해 렌더마다 Hook 호출 순서가 바뀌게 만들지 않습니다.
- 함수 컴포넌트가 클래스 컴포넌트보다 어떤 상황에서든 무조건 실행 속도가 빠르다고 단정하지 않습니다.
내 말로 설명해 보기
같은 custom Hook을 서로 다른 두 컴포넌트에서 호출하면 그 안의 상태가 서로 공유되나요?
함께 읽으면 좋은 개념
관련 면접 질문 8개
함수 컴포넌트는 어떻게 정의하고 사용하나요?
이름이 대문자로 시작하는 JavaScript 함수를 정의해 props를 입력받고 JSX 등 렌더 가능한 UI 값을 반환하도록 작성합니다. 상태 관리나 외부 동기화가 필요할 때는 함수 최상위에서 useState, useEffect 같은 Hook을 호출해 연결합니다. 이때 렌더 본문은 같은 입력에 같은 UI를 반환하는 순수 계산으로 유지하고, 네트워크 요청이나 DOM 조작 같은 부작용은 이벤트 핸들러나 Effect에 분리해 배치합니다.
꼬리질문과 참고자료 →클래스 컴포넌트 사용 경험은 면접에서 어떻게 설명할까요?
먼저 실제 프로젝트에서 클래스 컴포넌트를 작성하거나 유지보수해 본 경험이 있는지 솔직하게 밝히고, 다뤄 본 적이 있다면 state 관리·수명주기 메서드·에러 바운더리 중 직접 담당한 역할을 중심으로 설명합니다. 당시 겪었던 구체적인 문제와 수정 전후의 동작 변화, 검증 방법을 함께 연결하면 설득력이 높아집니다. 만약 실무 경험이 없다면 솔직히 말씀드린 뒤, 레거시 코드 독해나 에러 바운더리 구현을 위해 학습한 함수 컴포넌트와의 실행 모델 차이를 정리해 답변합니다.
꼬리질문과 참고자료 →클래스 컴포넌트와 함수 컴포넌트의 실행 모델은 어떻게 다른가요?
클래스 컴포넌트는 생성된 인스턴스의 this.state와 메서드를 통해 값을 읽고 수정하지만, 함수 컴포넌트는 매 렌더마다 함수가 새로 호출되며 Hook을 통해 상태를 연결합니다. 따라서 함수 컴포넌트의 이벤트 핸들러와 Effect는 자신이 생성된 그 렌더 시점의 props와 state 스냅샷을 클로저로 캡처합니다. 신규 개발에서는 로직 조합이 유연한 함수 컴포넌트가 권장되지만, 기존 클래스 코드는 변경 비용과 에러 바운더리 같은 요구사항을 고려해 유지 여부를 판단합니다.
꼬리질문과 참고자료 →