🛤 Class Component vs Function Component
과거의 리액트는 상태를 가지는 컴포넌트는 클래스형으로, 상태를 가지지 않는 컴포넌트는 함수형으로 작성하였다. 왜 그랬을까?
Container 컴포넌트는 상태를 가지는데, 함수형 컴포넌트로 생성하게 되면
- this를 사용하기 때문에 클래스형 컴포넌트가 생성방식이 더 복잡하다.
- 클래스형 컴포넌트에는
render()메서드가 꼭 있어야 한다. - 클래스형 컴포넌트에서 이벤트 등록 시 this 바인딩을 꼭 해줘야만 한다.
📌 stateless 컴포넌트
stateless 컴포넌트는 말 그대로 상태를 가지지 않는 컴포넌트이다. 이러한 컴포넌트를 stateless 컴포넌트 또는 presentational(프레젠테이셔널) 컴포넌트라고 한다.
목적
시각적 표현에 중점 을 둔 컴포넌트- 시각적 표현을 목적으로 하니 복잡한 비즈니스 로직 필요없다
상태를 가질 필요가 없고 외부에서 전달 받은 데이터를 화면에 그려준다.
✏️ stateless 컴포넌트는 함수형으로 작성한다?
표현을 목적으로 하는 컴포넌트는 복잡한 비즈니스 로직이 필요없고 이를 클래스로 작성할 경우 Babel 컴파일러가 클래스를 컴파일 해줄 때 함수형 컴포넌트일 때 보다 훨씬 더 많은 코드로 컴파일 해주기 때문에 stateless 컴포넌트를 클래스형으로 작성하는 것은 낭비이다.
📌 stateful 컴포넌트
상태를 가지는 컴포넌트를 stateful 컴포넌트 또는 Container(컨테이너) 컴포넌트라고 한다.
목적
- 비즈니스 로직을 가지고 있다.
state(상태) 를 가진다.- Presentational 컴포넌트에게 Props를 전달하여 UI 렌더링 하도록 한다.
- 화면을 그리는 최소한의 스타일 정보를 가진다.
❓ stateful 컴포넌트는 함수형으로 작성하지 않는다?
하지만, React Hook의 등장으로 함수형 컴포넌트로도 Container 컴포넌트의 역할이 가능해졌다.
🏓 소감
클래스형 컴포넌트와 함수형 컴포넌트에 차이에 대해 알게되었다.
프로젝트를 시작하게 될 때, 컴포넌트를 생성할텐데 이 때, 이 컴포넌트가 상태를 가지는 컴포넌트인지 상태를 갖지 않는 컴포넌트인지 구분을 짓고 컴포넌트를 생성해야겠다.
오늘날 리액트에서 React Hook이 등장하게 되면서 클래스형으로만 작성되던 stateful Component가 어떻게 함수형 컴포넌트로 바뀌게 되었는지를 배우게 되면 리액트에 대한 이해가 한층 더 깊어질 것 같다.