React 함수 컴포넌트와 클래스 컴포넌트

WONNY_LOG·2023년 5월 4일

React에서 함수 컴포넌트와 클래스 컴포넌트의 차이 🔥

react에서 컴포넌트 선언시 사용되는 2가지 방식이 있다.
과거 클래스형 컴포넌트를 많이 사용했지만
React v16.8 이후, 함수 컴포넌트에 hook의 지원으로
현재 공식문서에서도 함수포넌트의 사용을 권장하고 있다.

함수 컴포넌트

보편적으로 react로 컴포넌트 생성시 많이 쓰이는 방식
js의 function으로 생성한 컴퍼넌트
(자바스크립트 함수로 작성함)
함수 자체가 렌더 함수이기 때문에 render()메서드를 사용하자 않아도됨.
return문을 통해 JSX코드를 반환
state를 사용할 수 없다
(React v16이후로 제공되는 Hooks로 사용 가능해짐)
생명 주기 함수(라이프 사이클)를 작성할 수 없다
(React v16이후로 제공되는 Hooks로 사용 가능해짐)
(useState => state 관리 가능 useEffect => LifeCycle 관리 가능)
클래스형 컴퍼넌트보다 메모리 자원을 적게 사용한다
(빌드한 결과물 또한 클래스형 컴퍼넌트보다 작다)
비교적 간결하게 코드를 작성 할 수 있음
component를 상속받지 않아도 된다.
공식 홈페이지에서 사용 권장

선언방식

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

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

//화살표함수
const App = () => {
  return <div className = "react">{name}</div>
}

export default App;

state

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

props

props를 불러올 필요없이 바로 호출 가능하다.

이벤트 핸들링

const + 함수 형태로 선언해줘야 한다.
요소에 적용할 때 this가 필요없다.

Life Cycle

Hook을 사용하여 생명주기를 컨트롤한다
(useEffect)

클래스형 컴포넌트

현재 자주 사용되진 않지만, 아직 사용하고 있는 기업들이 있음
class 키워드로 시작
React.Component를 상속 받음
(import React, { Component } from 'react';)
render() 함수를 사용해서 JSX를 반환
props를 조회할 때 this 키워드 사용
(const { color, name, isSpecial } = this.props;)
state, lifeCycle 관련 기능 사용 가능
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다

선언방식

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    const { color, age } = this.props;
    return <div className="react">{name}</div>
  }
}

export default App;

state

constructor 안에서 this.state 초기 값 설정 가능
constructor 없이 바로 state 초기값을 설정할 수 있다.
클래스형 컴포넌트의 state는 객체 형식이다.
this.setState 함수로 state의 값을 변경할 수 있다.

props

this.props로 통해 값을 불러올 수 있다.

이벤트 핸들링

함수 선언시 화살표 함수로 바로 선언 가능하다.
요소에 적용할때 this.를 붙여줘야한다.

Life Cycle

여러 종류의 "생명주기 메소드" 를 가지며 이 메소드를 오버라이딩(상속하여 재정의) 하여 특정 시점에 코드가 실행되도록 설정 한다

리액트에서 함수형 컴포넌트라고 부르지 않고 함수 컴포넌트라고 부르는 이유가 무엇인가요 🔥

결론적으로 다른말이다.
리액트에는 함수형 컴포넌트가 없다.

Functional Component 함수형 프로그래밍이란?

순수함수의 구성으로 이루어진 프로그래밍 방법론이다.

순수함수란?

side effect를 받지 않으며, 같은 값을 넣었을때 리턴되는 값이 항상 같아야한다.

function double(x) {
  const y = x * 2;
  return y;
}

console.log(double(3));
// 6

console.log(6);
// 6

리액트에서 작성하는 함수컴포넌트는 같은 값을 넣으면 항상 같은 값이 리턴되는가?

NO
공식문서에서도 함수 컴포넌트(function component)를 설명하고 있다.
(리액트고 과거엔 functional component라고 부르긴했음 ㅋㅎ)
구현에 따라 달라질 수 있는 반환값을 가지고 있기 때문이다.

function loggingDouble(x) {
  const y = x * 2;
  console.log(y); // Side effect!
  return y;
}

console.log(loggingDouble(3));
// 6
// 6

console.log(6);
// 6

위의 함수는 반환값 외에 console.log 함수를 통해 계산 값을 출력한다. 부작용이다.

예시로 useEffect 사용이 있다. useEffect는 이름에 드러나듯 함수 컴포넌트가 부작용을 이용하는 도구다.

function ImpureFunctionComponent() {
  const message = 'hello world';
  useEffect(() => { document.title = message; }); // Side effect!
  return (<h1>{message}</h1>);
}

//호출시 리턴값
(<h1>hello world</h1>)