[React] Class Component & Function Component

eslim·2020년 12월 1일
0

React

목록 보기
4/5
post-thumbnail

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를 사용하도록 권장하고 있다.

출처
https://chanhuiseok.github.io/posts/react-4/
https://velog.io/@_jouz_ryul/-리액트-hooks-함수형-컴포넌트

0개의 댓글