React - Component 개념 정리

Component란?

 리액트의 컴포넌트는 아래의 그림과 크게 클래스 컴포넌트와 함수 컴포넌트로 나누어 볼 수 있다.

 

 리액트 초기버전에는 클래스 컴포넌트를 주로 사용하였으나 사용의 불편함이 대두되어 이후에는 함수 컴포넌트를

개선하여 사용하게 되었다.

 

함수 컴포넌트를 개선하면서 만들어진 것이 훅(Hook)이다.

훅이란 class를 이용한 코드를 작성할 필요 없이 state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다.

 

이 훅을 통해서 함수 컴포넌트도 클래스 컴포넌트처럼 사용할 수 있다.

 

Function Component(함수형 컴포넌트)

 모든 리액트 컴포넌트는 pure function과 같은 역할을 해야한다고 했다.

이는 곧 리액트 컴포넌트를 일종의 함수라고 생각한다는 것이다.

 

다음의 예시를 보자.

function Welcome(props) {
	return <h1> 안녕? {props.name}</h1>;
}

 위코드는 Welcom이라는 함수가 하나 있는데 하나의 props 객체를 받아서  <h1> 태그가 담긴 react element를 반환하고 있는데 이렇게 생긴것을 함수 컴포넌트라고 부른다.

 

코드가 굉장히 간단한데 이러한 코드의 간결성이 함수 컴포넌트의 장점이라고 할 수 있다.

 

 

Class Component(클래스형 컴포넌트)

 클래스 컴포넌트와 함수 컴포넌트의 가장 큰 차이점으로

리액트의 모든 클래스 컴포넌트는 React.Component를 상속받아서 만든다는 것이다.

 

다음은 예시이다.

import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    return <h1>안녕? {this.props.name}</h1>;
  }
}

export default Welcome;

 

결국 React.Component를 상속받았기 때문에 리액트 컴포넌트가 되는 것이다.

 

 

Component의 이름 짓는법

 Component 이름은 항상 대문자로 시작해야한다.  why -> 리액트는 소문자로 시작하는 태그를

DOM태그로 인식하기때문이다.

만약 위코드에서 Welcom이 소문자 w로 시작했으면 HTML의 DOM 형태로 인식되어서 에러를 발생시킬 수 있다.

 

 

 

컴포넌트의 LifeCycle

 

  위 그림은 클래스 컴포넌트의 생명주기인데 클래스 컴포넌트가 생성된 이후로

Constructor에 정의된 state값이 변함에 따라  componentDidUpdate 함수가 실행되면서 값이 변경되면 재랜더링된다.

이후 상위 컴포넌트에서 현재 컴포넌트를 더 이상 화면에 표시하지 않을 때 componentWillUnmount 함수가 실행되면서

죽게된다.

 

정리하자면 Component는 계속 존재하는 것이 아니라 시간의 흐름에 따라 생성되고 업데이트 되다가 사라진다.