[React + Node 같이 때려잡기] (3) 리액트 클래스 컴포넌트, 라이프 사이클

Rainbow🌈Coder 2022. 12. 5. 18:50

728x90

0. 한눈에 비교하는 클래스 컴포넌트 vs 함수 컴포넌트

1. 클래스 컴포넌트 생성 shortCut : rcc

(함수 컴퍼넌트 생성은 : rafce : react arrow function component export)

import React, { Component } from 'react'

export default class AppClass extends Component {
  render() {
	return (
	  <div>AppClass</div>
	)
  }
}

function이 class로 바뀐 것을 볼 수 있다.

AppClass.js

: 클릭수를 보여주는 버튼 그리는 예제

import React, { Component } from 'react';
import './App.css';

export default class AppClass extends Component {
	constructor(props) {
		super(props);
		//state라는 객체를 하나 만들고, 그 안에 원하는 state를 다 넣으면 됨
		this.state = {
			counter: 0,
		}
	}
	increase = () => {
		this.setState({
			counter: this.state.counter + 1,
		});
	}
	render() {
		return (
			<div>
				<button onClick={this.increase}>{this.state.counter}</button>
			</div>
		);
	}
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import AppClass from './AppClass';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
	<React.StrictMode>
		<AppClass />
	</React.StrictMode>
);


reportWebVitals();

2. 클래스 컴포넌트 lifecycle

constructor

constructor(생성자)이다. 메서드에서는 초기 state를 정한다.

훅에서는 useState hook을 사용하면 초기 상태를 쉽게 설정해줄 수 있다.

// Class
class Example extends React.Component {
    constructor(props) {
        super(props);
        this.state = { count: 0 };
}

// Hooks
const Example = () => {
    const [count,setCount] = useState(0);
}

render

UI 그려주는 함수.

함수형 컴포넌트에서는 render를 안쓰고 컴포넌트를 렌더링할 수 있다.

// Class
class Example extends React.Component {
  render() {
    return <div>컴포넌트</div>
  }
}

// Hooks
const example = () => {
  return <div>컴포넌트</div>
}

componentDidMount

//Api call

UI 세팅이 완료되면 알려줌. UI is Ready

함수형 Hooks 에서는 useEffect를 활용하여 다음의 기능을 구현할 수 있다.

// Class
class Example extends React.Component {
    componentDidMount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    }, []);
}

여기서 useEffect의 [] 의존성 배열을 비워야지만 똑같은 메소드를 구현할 수 있다.

리액트 공식문서-useEffect

ComponentDidUpdate

따라서 최신 업데이트된 값을 가지고 어떤 작업을 해야할 때 활용할 수 있다.

업데이트가 끝난 직후이므로, DOM관련 처리를 해도 무방하다.

// Class
class Example extends React.Component {
    componentDidUpdate(prevProps, prevState) {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        ...
    });
}

componentWillUnmount

이 메서드는 컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 해야한다.

함수형 컴포넌트에서는 useEffect CleanUp 함수를 통해 해당 메서드를 구현할 수 있다.

// Class
class Example extends React.Component {
    coomponentWillUnmount() {
        ...
    }
}

// Hooks
const Example = () => {
    useEffect(() => {
        return () => {
            ...
        }
    }, []);
}

3. 함수 컴포넌트는 reack hook인 useEffect 이용

(1) 클래스 컴포넌트의 componentDidMount의 기능을 커버

* 두번째 인자 배열에 아무 값도 없어야 componentDidMount 처럼 작동

useEffect는 매개변수를 2개 받는다.

클래스 컴포넌트의 componentDidMount의 기능을 커버해줌

따라서 api 호출 작업을 useEffect에서 함

	useEffect(() => {
		
	}, []);

(2) 클래스 컴포넌트의 componentDidUpdate의 기능을 커버

* 두번째 인자 배열에 어떠한 값이라도 있어야 componentDidUpdate 처럼 작동

값이 업데이트 될때마다 실행

두번째 인자인 배열 안에 값이 들어가면 해당 값을 주시하게 되고,(여러값을 배열 안에 넣으면 배열 값 중 하나라도 값이 바뀌면 반응, 따로 관리하고 싶으면 따로 관리해주고 싶은 값들 만큼 useEffect를 따로 작성해주면 됨)

해당 값이 업데이트되면 알려주게(첫번째 인자인 콜백함수의 실행) 된다.

	useEffect(() => {
	}, [counter]);

import { useState, useEffect } from 'react';
import './App.css';

function App() {
	const [counter, setcounter] = useState(0);
	const increase = () => {
		setcounter(counter + 1);
	}

	useEffect(() => {
	}, [counter]);
	return (
		//html단
		<div>
			<button onClick={increase}>
				{counter}
			</button>
		</div>
	);
}

export default App;

참고 문헌 : https://kyun2da.dev/react/%EB%A6%AC%EC%95%A1%ED%8A%B8-%EB%9D%BC%EC%9D%B4%ED%94%84%EC%82%AC%EC%9D%B4%ED%81%B4%EC%9D%98-%EC%9D%B4%ED%95%B4/

728x90