[React] Class Component & Function Component

eslim·2020년 12월 1일

JavaScript React TIL

React

목록 보기

4/5

study 06 | Class Component & Function Component

React component

컴포넌트는 프로그래밍의 한 부분을 의미하며 재사용이 가능한 최소 단위를 말한다. 그래서 객체 지향 언어를 사용할 때 자주 사용되며 재사용이 가능하기 때문에 컴포넌트 단위로 분류하거나 이동 가능하다는 특징이 있다.

이는 모듈(Module)과 혼동될 수 있는데 모듈은 특정 기능을 온전히 수행할 수 있도록 만들어 졌다면 그 모듈 내에서도 재사용이 가능한 단위가 컴포넌트라 할 수 있다.

컴포넌트는 크게 함수 컴포넌트와 클래스 컴포넌트로 구분된다.

1. 클래스 컴포넌트

1-1. 작성 방법

class로 정의하고 render() 함수에서 JSX를 반환한다.

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>
  }
}

export default App;

1-2. 특징

state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다.

2. 함수 컴포넌트

2-1. 작성 방법

function 으로 정의하고 return 문에 JSX로 렌더링한다.

1) function

import React from 'react';
import './App.css';

function App() {
  const name = 'react';
  return <div className = "react">{name}</div>
}

export default App;

2) arrow function

import React from 'react';

const MyComponent = () =>{
    return <div>test</div>;
};

export default MyComponent;

2-2. 특징

state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 함수 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.

3. 클래스 컴포넌트와 함수 컴포넌트의 차이점

3-1. state

1) 클래스 컴포넌트

this.state 초기값 설정

class ClassComp extends React.Component {
  state = {
    num: this.props.initNum
  }

	render() {
    return (
			<div className="container"></div>
		)
	}
}

2) 함수 컴포넌트

함수형 컴포넌트에서는 useState 함수로 state를 사용한다.
useState 함수를 호출하면 배열이 반환되는데 첫 번째 원소는 현재 상태
두 번째 원소는 상태를 바꾸어 주는 함수

const [num, setNum] = useState(1);

3-2. Lifecycle

1) 클래스 컴포넌트

컴포넌트가 생성이 되면 getDefaultProps(), getInitialState() 라는 메소드를 호출
이후, componentWillMount() 메소드를 호출 (컴포넌트가 mount 되기 전에 처리해야 하는 내용을 실행, render 호출 전)
render() 메소드를 호출
컴포넌트가 mount 되면 componentDidMount() 를 호출 (컴포넌트가 생성된 이후 처리해야 하는 내용을 실행)

class ClassComp extends React.Component {
  state = {
    number: this.props.initNumber,
    date: (new Date().toString())
  }
  componentWillMount() {
    console.log("%cclass => componentWillMount", classStyle);
  }
  componentDidMount() {
    console.log("%cclass => componentDidMount", classStyle);
  }
  render() {
	...
  }
}

2) 함수 컴포넌트

hooks 을 사용하여 함수형 컴포넌트에서도 life-cycle 함수를 이용할 수 있다.
클래스형 컴포넌트에서의 각각 생명주기 메소드에 대응하는 훅이 존재하는 것은 아니지만 useEffect 훅을 이요하면 비슷한 기능을 한곳으로 모을 수 있어서 가독성이 좋아진다.

import React, ( useState, useEffect } from 'react';

function MyComponent() {
  const [count, setCount ] = useState(0);
  useEffect( ()=> {
    document.title = 'count : ${count}`;
  });
  return <button onClick={ ()=> setCount(count +1) }> increase </button>
}

4. 결론

클래스 컴포넌트의 경우 state 기능, lifecycle 기능 사용, 임의의 메소드 정의가 가능하며 render() 함수가 꼭 필요하고 , 그 안에 JSX 를 반환해야 합니다. 함수 컴포넌트는 state 기능과 lifecycle 을 사용할 수 없었는데 이후 react hooks가 도입되면서 해결되었다. 리액트 레퍼런스에서는 함수형 컴포넌트와 Hooks를 사용하도록 권장하고 있다.