January 31, 2022 https://born-dev.tistory.com/27

<aside> 💡 React 컴포넌트를 만들때 클래스형 컴포넌트, 함수형 컴포넌트 2가지 방식이 있다 과거에는 클래스형 컴포넌트를 많이 사용했지만

2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식 문서에서도 함수형 컴포넌트와 훅(hook)을 함께 사용할 것을 권장하고 있다.

</aside>

✨ 서론 ✨

1. 컴포넌트의 기능

• 단순한 템플릿 이상의 기능을 수행한다.
• 데이터가 주어졌을 때 이에 맞추어 UI를 만들어 주는 기능을 한다.
• 라이프사이클 API를 통해 컴포넌트가 화면에 나타날 떄, 사라질 때, 변할 때 작업들을 수행한다.
• 목적에 따라서 프레젠테이션(presentational) 컴포넌트와 컨테이너(container) 컴포넌트로 나눈다.

1.1 프레젠테이셔널 컴포넌트

• View 만을 담당하는 컴포넌트이다 (UI를 작성한다)
• 이 컴포넌트 안에서는 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 둘 다 사용할 수 있다.
• 리덕스 스토어에 직접적으로 접근하지 않고 props로만 데이터, 함수를 가져온다.
• 순수한 컴포넌트로 state를 사용하지 않으며 State가 있을 경우 데이터가 아닌 UI에 대한 state여야 한다.
• 주로 함수형 컴포넌트로 작성된다.