[프론트엔드] React hooks / 클래스형 컴포넌트 / 함수형 컴포넌트

Question :  React hooks에 대해 설명하시오

 

Answer : React Hooks는 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 기능을 사용할 수 있게 해주는 함수들입니다. 대표적인 Hooks에는 useState, useEffect, useContext 등이 있습니다. useState는 상태 변수를 선언하고 관리할 수 있게 해주며, useEffect는 컴포넌트의 사이드 이펙트(side effects)를 처리할 수 있게 합니다. 이를 통해 클래스형 컴포넌트 없이도 상태 관리와 생명주기 메서드를 활용할 수 있어 코드의 가독성과 유지보수성이 향상됩니다. 또한, 커스텀 훅을 만들어 재사용 가능한 로직을 추출하고 공유할 수 있습니다. Hooks는 React 16.8에서 도입되었습니다. 

---

 

Question :  클래스형 컴포넌트에 대해 설명하시오

 

Answer : 클래스형 컴포넌트는 ES6 클래스 문법을 사용하며, 상태(state)와 생명주기(lifecycle) 메서드를 직접 사용할 수 있습니다. 예를 들어, render(), componentDidMount(), componentDidUpdate() 같은 메서드를 통해 컴포넌트의 다양한 단계에서 코드를 실행할 수 있습니다.

---

 

Question :  클래스형 컴포넌트의 장단점에 대해 설명하시오

 

Answer : 

장점 1. componentDidMount, componentDidUpdate, componentWillUnmount 등의 메서드를 통해 컴포넌트의 생명주기를 명확히 관리할 수 있습니다.

장점 2. 클래스 문법을 사용하여 상속 등의 객체지향 프로그래밍(OOP) 개념을 적용할 수 있습니다.

단점 1. 상태와 생명주기 메서드가 많아질수록 코드가 복잡해지고 이해하기 어려워질 수 있습니다.

단점 2. 클래스 선언, constructor, this 바인딩 등 추가 코드가 필요해 코드가 장황해질 수 있습니다.

---

 

Question :  함수형 컴포넌트에 대해 설명하시오

 

Answer : 함수형 컴포넌트는 단순히 함수를 사용하여 UI를 정의합니다. 함수형 컴포넌트는 초기에는 상태와 생명주기 기능을 직접 사용할 수 없었지만, React 16.8에서 Hooks가 도입되면서 이러한 기능을 사용할 수 있게 되었습니다. 대표적인 Hooks에는 useState와 useEffect가 있으며, 이를 통해 상태 관리와 사이드 이펙트를 처리할 수 있습니다.

---

 

Question : 함수형 컴포넌트의 장단점을 설명하시오

 

Answer : 

장점 1. 함수형 컴포넌트는 코드가 간결하고 이해하기 쉬워 유지보수성이 높습니다.

장점 2. useState, useEffect 등의 Hooks를 사용하여 상태 관리와 사이드 이펙트를 쉽게 처리할 수 있습니다.

단점 1. 복잡한 생명주기 로직을 구현할 때는 여러 훅을 조합해야 하므로 가독성이 떨어질 수 있습니다.

단점 2. Hooks 개념을 처음 접하는 개발자에게는 약간의 학습 곡선이 있을 수 있습니다.

 

---