이번 포스팅에서는 react component에 대해 간단히 정리하여 보자!

본 포스팅은 리액트 공식문서를 읽고 정리한 글입니다.

Component

리액트에서 컴포넌트는 가장 최소의 기능을 하는 UI로, 독립적인 기능을 하도록 설계해야 한다. 그래야만 리액트의 장점 중 하나인 재사용이 가능하기 때문이다.

컴포넌트를 작성하는 방식에는 클래스형 컴포넌트와 함수형 컴포넌트, 두가지 방법이 있다. 각각의 특징과 차이점에 대해 알아보자. 😊😊

클래스형 Component

클래스형 컴포넌트는 위와 같이 리액트에서 제공하는 React.Component 클래스를 상속하여 만들 수 있다.

클래스형 컴포넌트는 render() 함수를 구현해 주어야 하는데, render 함수란 JSX 문법을 이용해서 데이터를 어떻게 UI로 표현할 건지를 정의 해주는 부분이다.

이 과정에서 컴포넌트가 기억해야 하는 data가 있다면 데이터가 있다면 state에 저장해 놓으면 된다. 위 코드에 {this.prop.name}으로 prop을 참조한 것 처럼 {this.state.*}으로 state를 참조할 수 있다.

UI를 업데이트가 필요할 시에 this.state를 업데이트 해주면 리액트가 알아서 render 함수를 다시 호출해 주고 브라우저에 업데이트를 해주게 된다.

함수형 Component

컴포넌트 자체에 데이터(State)가 없는 경우 외부에서 전달받은 데이터(Props)만 보여주면 되거나, 아니면 State, Props 둘다 없는 아주 정적인 컴포넌트인 경우 굳이 클래스를 정의 하지 않고 함수 컴포넌트를 사용할 수 있다.

클래스 컴포넌트와 달리 함수 컴포넌트는 함수를 호출할때마다 함수의 코드 블럭이 다시 실행이 되고, 그안에 선언한 모든 로컬 변수들은 함수의 실행 컨텍스트 안에서 재정의되고 값이 할당되어진다.

일반 함수형 컴포넌트에서는 컴포넌트만의 자체적인 데이터 (State)를 가질 수가 없기 때문에,
함수가 호출될때 모든 로컬 변수들의 값이 초기화 되게 된다.

따라서 함수형 컴포넌트에서 state를 가지도록 하려면 리액트 훅의 useState API를 이용하여야 한다.