[React] 컴포넌트의 형태를 분류해보자

 오늘은 딱히 실습 코드가 없이 이론적인 글이 될 거 같습니다만, 리액트에서 사용하는 컴포넌트에는

대략 이러이러한 종류의 컴포넌트가 있구나~ 정도로 이해하시고 넘어가시길 바랍니다.

 

1. 함수형 컴포넌트

 가장 간단하고 가벼운 컴포넌트로서, 내부 데이터(상태)를 관리하는 스테이트(state)가 없습니다.

즉 내부를 관리할 필요가 없이 외부에서 프로퍼티(props)등을 받아 바로 화면에 뿌려주는 정도로 사용합니다.

 

// 함수형 컴포넌트의 예
function ComponentFunc(props) {
  const { count, isTen, countUp } = props;
  return (
    <div>
      <p>숫자값 : {count}</p>
      <p>10이상 : {String(isTen)}</p>
      <button onClick={countUp}>카운트</button>
    </div>
  );
}

 

2. 클래스형 컴포넌트

 이전 포스팅에서도 많이 나왔고 실제로도 많이 사용되는 컴포넌트 형태입니다. React.Component를 상속받기 때문에 모든 기능을 사용할 수 있고, 함수형 컴포넌트와는 다르게 생명주기 함수도(다음 포스팅에 설명) 사용할 수 있습니다.

일반 컴포넌트와 퓨어(Pure) 컴포넌트가 있는데, 차이점은 퓨어 컴포넌트가 데이터 변경 시만 호출되므로 가볍습니다.

 

// 일반적인 컴퍼넌트 예 (퓨어컴퍼넌트는 PureComponent 상속)
class ComponentNormal extends Component {
  constructor(props) {
    super(props);
    this.state = {
      stateNum: 0,
      stateText: "",
    };
  }
  ComponentDidMount() {}
  render() {
    return (
      <div>
        <p>숫자값 : {this.props.count}</p>
        <p>10이상 : {String(this.props.isTen)}</p>
        <button onClick={this.props.countUp}>카운트</button>
      </div>
    );
  }
}

 

3. 배열형 컴포넌트

 앞서 말한 두가지 형태의 컴포넌트와는 조금 다른 개념이지만, 간단히 말씀드리면 배열에 컴포넌트 형태의 객체들이 저장되어 있다고 보시면 됩니다.

var list = [<ComponentFunc />, <ComponentNormal />, <ComponentPure />]

당연한 얘기지만 실무에서는 다양한 목록 화면이 존재하기 때문에, 배열형 컴포넌트의 개념은 중요합니다.

 

// 배열형 컴퍼넌트 예 (컴포넌트 자체보다 pageNumber 변수가 중요)
class ComponentPure extends PureComponent {
  render() {
    const pageList = [1, 2, 3, 4, 5];
    const pageNumber = pageList.map((number) => (
      <div>페이지 번호: {number}번</div>
    ));
    return (
      <div>
        <p>페이지 목록</p>
        {pageNumber}
      </div>
    );
  }
}

 

 오늘은 여기까지 입니다. 딱히 실습해 볼 수 있는 코드가 아니고 너무 이론적이 내용이라 지루하셨을 텐데 , 그래도 이 정도의 컴포넌트의 형태가 있구나~라고 꼭 기억하고 넘어가셨으면 좋겠습니다.

 

그럼 오늘도 참 쉽죠?

 

---

 

2020/08/18 - [Web프론트엔드/리액트] - [React] 리액트 개발환경 구축

2020/09/09 - [Web프론트엔드/리액트] - [React] 리액트 테스트 앱 생성 및 수정

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트에서 사용하는 JSX

2020/09/11 - [Web프론트엔드/리액트] - [React] 리액트의 컴포넌트를 알아보자

2020/09/15 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ① - props 프로퍼티

2020/09/19 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ② - state 스테이트

2020/09/21 - [Web프론트엔드/리액트] - [React] 컴포넌트의 데이터 관리 ③ - 콜백 함수