FE develop/React

React - 컴포넌트의 세가지 카테고리

hoj0806 2024. 11. 14. 18:18

 

 

리액트에서 컴포넌트는 여러 가지 관점에서 분류 할 수 있다 그 중 재사용성과 컴포넌트의 책임에 대한 측면에서 세가지 카테고리로 나눠볼수 있다

 

 

  1. Stateless / Presentational 컴포넌트
    상태를 관리하지 않고 주로 props를 받아 단순히 렌더링하거나 단순한 요소를 렌더링한다 주로 작은 규모의 컴포넌트가 많고 재사용성이 있다
  2. Stateful 컴포넌트 
    상태(state)를 관리하는 컴포넌트이다 컴포넌트 내부에 state가 정의되고 상태가 변경될때마다 컴포넌트가 재렌더링 된 역시 재사용성이 있다
  3. Structural 컴포넌트
    앱 전체의 레이아웃이나 구조를 구성하는 역할을 하는 컴ㅍ넌트이다 다른 컴포넌트를 배치하거나 구성하는 역할을 하며 UI의 전반적인 구조를 담당한다 규모가커 재사용하기 어렵다