💪 React. Class VS Function Style Component w/ 생활코딩

📌 개발 공부 3개월 차인 to-be 개발자의 자습 블로그🙂ﾠOct 17 ~ 23, 2021

현재 상태

class와 function을 따로 학습했는데, 같이 놓고 비교하면서 학습해야 개념이 더 잘 잡힐 것 같아서.

intro

리액트는 두 가지 방법으로 컴포넌트를 만든다.
클래스 & 함수!

예전에는 함수 스타일로 state를 관리하지 못했고 컴포넌트 생성 변경 소멸에 대한 이벤트인 라이프사이클 api도 사용할 수 없었음
그래서 함수 스타일은 상위 컴포넌트가 시키는 일만 처리하는 단순 컴퍼넌트에만 사용되엇었음

하지만 hooks 덕분에 함수 방식에서도 내부적으로 state를 다룰 수 있게 되었고 lifecycle 작업도 처리할 수 있게 되었음

함수가 클래스랑 대등해진 것임

게다가 함수의 간편함을 그대로 이어받기 때문에 더 강력해짐

하지만 클래스형의 장점도 있어서 리액트가 말하길 앞으로도 클래스형을 지원한다고 함

클래스형을 통해 함수형을 더 잘 이해하고, 함수형을 통해 클래스형을 더 잘 이해할 수 있음

(+) npx create-react-app .
현재 디렉토리에 리액트 어플리케이션 환경 구현

함수형은 return 값만 만들어 주면 그게 곧 실제 화면이 된다.
클래스형은 render라는 함수를 써서 그 return 값이 화면이 된다.
즉 함수형은 자기 자신이 render인 것이다.

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

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp></FuncComp>
            <ClassComp></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(){
    return (
        <div className="container">
            <h2>function style component</h2>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
            </div>
        )
    }
}

export default App;

---

state 사용법

한 component에서 state로 관리하는 상태 값을 다른 component가 props로 받아 사용한다.
props는 두 방식 다 사용하고, state는 원래는 클래스형에서만 사용할 수 있었다가 이제 바뀐 것임.
사용하는 방법은 아래와 같다.

1) 바로 props로 받아오기 (🔴 : 위 코드에서 새로 추가한 부분. props 값을 그대로 Number 옆에 찍음)
클래스형은 this.props.~, 함수형은 매개변수 만들고 props.~

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

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp 🔴initNumber={2}></FuncComp>
            <ClassComp 🔴initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(🔴props){ // 매개변수명은 다른 걸로 해도 되지만 보통 props로 함
    return (
        <div className="container">
            <h2>function style component</h2>
            🔴<p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                🔴<p>Number : {this.props.initNumber}</p>
            </div>
        )
    }
}

export default App;

2) state를 통해 받아오기
함수형에서는 못함
(🔴 : 위 코드에서 새로 추가한 부분. props 값을 그대로 Number 옆에 찍음)

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

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp initNumber={2}></FuncComp>
            <ClassComp initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(props){
    return (
        <div className="container">
            <h2>function style component</h2>
            <p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
  🔴state = {
    number:this.props.initNumber
    }
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                <p>Number : {🔴this.state.number}</p>
            </div>
        )
    }
}

export default App;

---

hook

React 16.8부터 추가되었다.

함수형 컴포넌트에 hook 사용하기
React에 내장된 Hook을 사용해도 되고, 내가 직접 만들어서 써도 된다.
hook은'use'로 시작되는데, 이는 페이스북이 제공하는 내장된 훅이다.

1) state, useState

↓ 클래스형

state = {
  number:this.props.initNumber
}

클래스형 컴포넌트에 했던 위 작업을 함수형 컴포넌트에 똑같이 하기

import React🔴, {useState} from 'react';
imoprt './App.css';

function App() {
    return (
        <div className="container">
            <h1>Hello, world!</h1>
            <FuncComp initNumber={2}></FuncComp>
            <ClassComp initNumber={2}></ClassComp>
        </div>
    );
}

// ↓ function style component

function FuncComp(props){
    🔴let numberState = useState(props.initNumber); // useState를 호출하되 그 값을 numberState로 설정
    🔴let number = numberState[0];
    return (
        <div className="container">
            <h2>function style component</h2>
            <p>Number : {props.initNumber}</p>
        </div>
    );
}

// ↓ class style component

class ClassComp extends React.Component{
  state = {
    number:this.props.initNumber
    }
    render(){
        return (
            <div className="container">
                <h2>class style component</h2>
                <p>Number : {this.state.number}</p>
            </div>
        )
    }
}

export default App;

useState를 사용하면 무조건 배열이 return되고 그 배열은 두 개의 값으로 이루어져 있다.
numberState = useState(props.initNumber);가 return한 배열의 첫 번째 자리가 state 역할을 하는 초기 값이다.

정리
함수형에서 state를 만들고 싶다면 useState에 값을 전달하면 된다. 그 값이 초기 값이 된다.

2) setState, useState

클래스형에서는 setState로 state를 update하지만 함수형에서는 useStat의 두 번째 값이 그 역할을 대신한다.

↓ 클래스형

<input type="button" value="random" onClick={
  function(){
    this.setState({number:Math.random()})
  }.bind.(this)
}></input>

↓ 함수형

<input type="button" value="random" onClick={
  function(){
    setNumber(Math.random());
  }
}></input>

---

생활코딩