클래스형 컴포넌트가 아닌 함수형 컴포넌트를 사용하는 이유
- 클래스 컴포넌트는 장황 합니다
- 클래스 선언, 이름, 익스텐즈 설명 등 여러 일을 해야합니다.
- 객체지향 관점에서는 필요하지만 JSX 엘레먼트를 만든다는 관점에서는 불필요한 일을 반복한다고 느껴집니다.
- 누가봐도 함수형 컴포넌트가 간단합니다.
- 동일한 작업을 진행하더라도 조금 더 직관적입니다.
- 이전에 함수형 컴포넌트를 사용하지 않았던 이유
- 라이프사이클(생명주기) : 화면 내에서 리액트 컴포넌트의 변화를 캐치하는 것
- 이전에 함수형 컴포넌트에서 리렌더(re-render)시점에 대한 것들을 제어 하는게 함수형 컴포넌트에서는 불가능 했었습니다.
- 지금은 리액트에서 훅스(Hooks) 라는 개념이 나왔습니다.
- 훅스 : A 라는 액션이 실행될때 A 라는 액션과 동시에 실행되는 함수를 지칭합니다.
- 훅스를 통해 스테이트의 변화나 컴포넌트가 화면에 노출되는 것들을 캐치할 수 있기때문에 함수형 컴포넌트 활용이 가능 해졌습니다.
클래스형 컴포넌트와 함수형 컴포넌트 동일 동작시 코드 비교
// 클래스형 컴포넌트
class ChoEun extends React.Component {
constructor() {
super();
this.state = {
name: "eun",
};
}
render() {
return <div>{this.state.name}</div>;
}
}
// 함수형 컴포넌트
const Eun = () => {
const [name, setName] = useState("eun");
return <div>{name}</div>;
};
클래스형 컴포넌트가 함수형 컴포넌트보다 더 장황하다고 하는 이유
- 클래스형 컴포넌트 사용시 불필요한 코드(함수형 컴포넌트 사용할시 안 적어도 되는 코드)를 많이 작성하게 됩니다.
함수형 컴포넌트가 클래스형 컴포넌트보다 실행속도가 조금 더 빠릅니다.
- 단순하게 장황한 문제가 아니라 안정적인 코드를 만드는데 함수형 컴포넌트가 더 도움이 됩니다.
- 훅스를 활용해서 생명주기에 대한 제어도 기존의 클래스 컴포넌트보다 더 명확하게 수행할 수 있습니다.
훅스는 기본적으로 함수로 뺄 수 있습니다.
- 훅스의 함수를 별도의 파일에 커스텀 훅스로 만들어서 여러 파일에 임포트하여 쓰는 방법을 통해 하나의 비즈니스 로직을 여러 컴포넌트에서 재활용 할 수 있게 만들 수 있습니다.
(클래스형 컴포넌트에서는 불가능 했었습니다.)
- 따라서 UI 로직과 비즈니스 로직을 분리할 수 있습니다.
결론 : 함수형 컴포넌트 사용은 1)코드의 간결함, 훅스를 2)커스텀 훅스로 활용 가능