<TIL 20.11.03> Functional Component + Hooks를 쓰는이유

클래스형 컴포넌트

• state 기능 및 라이프 사이클 기능을 사용할 수 있다.
• 임의 메서드를 정의할 수 있다.
• render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.

함수형 컴포넌트

• 클래스형 컴포넌트보다 선언하기가 좀 더 편하다.
• 메모리 자원을 상대적으로 덜 사용한다.

과거에는 함수형 컴포넌트에서 state와 라이프사이클 API를 사용할 수 없다는 단점이 있었지만, 이러한 단점들은 리액트 훅이 도입되면서 해결되었다. 

 

*함수형 컴포넌트든 클래스형 컴포넌트든 state를 직접 조작하는 것이 아닌, setState나 useState와 같은 세터 함수를 사용하여 조작해야 한다. 이유는 state의 변화를 감지 하지 못하게 되어 다시 렌더링 하지 않는다. 그렇게 되면 state가 변경 되었다하더라도 화면상으로는 값이 변경 되지 않게 된다.

결론

클래스형 컴포넌트는 로직과 상태를 컴포넌트 내에서 구현하기 때문에 상대적으로 복잡한 UI 로직을 가지고 있다. 반면 함수형 컴포넌트는 state를 사용하지 않고 단순하게 데이터를 받아서(props) UI에 뿌려주기 때문에 stateless라고 불린다. 리액트 훅이 등장하면서 함수형 컴포넌트를 더 많이 사용하는 추세가 되었지만 오래된 리액트 코드의 경우 클래스형 컴포넌트로 이루어진 경우가 더 많으므로 두 가지 모두 다 잘 알고 있어야 리액트로 개발을 할 때 어려움을 겪지 않을 것이라고 생각한다.