프론트엔드 개발 · 기초
함수형 컴포넌트와 클래스 컴포넌트의 차이점은 무엇이며, 최근에는 왜 함수형 컴포넌트가 권장되나요?
힌트 · 상태와 생명주기를 다루는 방식의 차이, 그리고 Hook 도입이 가져온 변화의 관점에서 접근하세요.
Hooks상태 관리렌더링생명주기 메서드가독성
모범답안
함수형 컴포넌트와 클래스 컴포넌트의 가장 큰 차이점은 상태와 생명주기를 다루는 방식입니다. 클래스 컴포넌트는 this.state와 this.setState로 상태를 관리하고, componentDidMount 같은 생명주기 메서드를 사용합니다. 반면 함수형 컴포넌트는 원래 상태나 생명주기 관리가 불가능했지만, React Hooks가 도입되면서 useState로 상태를, useEffect로 생명주기 관련 로직을 다룰 수 있게 되었습니다.
최근 함수형 컴포넌트가 권장되는 이유는 Hooks 덕분에 클래스 컴포넌트의 장점을 그대로 가지면서도 더 간결하고 가독성 높은 코드를 작성할 수 있기 때문입니다. 특히 로직 재사용이 용이해지고, 복잡한 컴포넌트를 더 쉽게 관리할 수 있다는 점이 큰 장점입니다.
읽었다면, 이제 직접 답해볼 차례예요
패스잇 앱에서 이 질문에 말로 답하면 AI가 꼬리질문까지 이어가며 1:1 코칭합니다.
함께 보는 React 면접 질문
- React의 key prop이 필요한 이유와 index를 key로 사용하면 안 되는 이유를 설명해주세요.
- React에서 JSX란 무엇이며, 브라우저가 직접 이해하지 못하는 JSX가 실제로 어떻게 동작할 수 있는지 설명해주세요.
- JSX 문법에서 class 대신 className을, for 대신 htmlFor를 쓰는 이유는 무엇인가요?
- props와 state의 차이점은 무엇인가요? 각각 누가 소유하고 변경할 수 있는지 함께 설명해주세요.
- React에서 props는 왜 읽기 전용(read-only)이어야 하나요? 자식 컴포넌트에서 props를 직접 수정하면 어떤 문제가 생기나요?
- React의 useEffect Hook의 의존성 배열(dependency array)은 어떻게 동작하나요?