React.js 의 class 방식과 function 방식 비교 (react hook)

React.js 의 Class 사용방식과 Function 을 사용한 hook, custom hook 이렇게 3가지 방식을 비교한 코드입니다. 

작동은 전부 동일합니다. props 를 통해 300 값을 전달하여 카운팅 -1 을 1초마다 작동합니다. 버튼 onclick 을 통해 + 10 만큼 추가 됩니다.

 

App.js

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

import { Countdown } from './countdown'
import { CountdownClass } from './countdownClass'
import { CountdownWithUseInterval } from './countdownWithUseInterval'
import { CountdownFunctional } from './countdownFunctional'

class App extends Component {
	render() {
		return (
			<div className="App">
				<header className="App-header">
					<CountdownFunctional countDown={300} />
					<CountdownClass countDown={300} />
					<Countdown countDown={300} />
					<CountdownWithUseInterval countDown={300} />
				</header>
			</div>
		);
	}
}

export default App;

---

Hooks

import React, { useState, useRef, useEffect } from "react";

export function Countdown(props) {
	const intervalRef = useRef();
	const [countDown, setCountdown] = useState(props.countDown);

	useEffect(() => {
		const id = setInterval(function () {
			setCountdown(countDown => countDown - 1);
		}, 1000);

		intervalRef.current = id;

		return () => {
			clearInterval(intervalRef.current);
		}
	}, []);

	return (
		<div>
			<p>{countDown} seconds</p>
			<button onClick={() => setCountdown(countDown + 10)}>
				Add 10 seconds
      		</button>
		</div>
	);
}

 

useRef 역할은 component 가 unmout 될때 setInterval 함수를 초기화 해줍니다. useRef 에 대한 여러가지 기능에 대한 상세 설명은 아래 블로그를 참고해 주세요.

 

https://xiubindev.tistory.com/98

React Hooks : useRef() 함수

 

useState 는 상태값을 관리하기 위한 react hook 함수 입니다. hook 이 나오기 이전에는 class 기반으로 구현해야 했습니다. react hooks 이 나오고 나서 부터 함수형 function 을 이용하여 상태값을 useState 함수로 관리가 가능해 졌습니다. 

 

const [countDown, setCountdown] = useState(props.countDown);

 

coustDown 은 현재 상태값의 변수이며, setCountdown 은 상태값을 변경해 주는 함수입니다. useState() 에 할당된 값은 초기값을 의미합니다. 자세한 설명은 아래 블로그를 참고해 주세요.

 

https://xiubindev.tistory.com/97?category=826117 

React Hooks : useState() 함수

 

useEffect 함수는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 작동합니다. 

 

컴포넌트가 화면에 가장 처음 렌더링 그리고 한 번만 실행하고 싶을 때는 아래 처럼 빈 배열을 넣는다.

 

useEffect(() => {
  ...기술
},[]);

 

랜더링 될때마다 실행하고자 한다면..??? 배열값을 생략하면 됩니다.

useEffect(() => {
  ...기술
});

 

component 가  update 되는 즉, 특정 state 및 props 값이 변경될때 아래처럼 [] 배열에 기재해 주면 됩니다.

useEffect(() => {
  ...기술
},[Name]);

 

자세한 설명은 아래 블로그를 참고해 주세요.

https://xiubindev.tistory.com/100?category=826117

React Hooks : useEffect() 함수

---

Class

import React from "react";

export class CountdownClass extends React.Component {
	interval = 0;
	constructor(props) {
		super(props);
		this.state = {
			countDown: props.countDown
		};
	}

	componentDidMount() {
		this.setup();
	}

	componentWillUnmount() {
		clearInterval(this.interval);
	}

	render() {
		return (
			<div>
				<p>{this.state.countDown} seconds</p>
				<button onClick={() => this.setState({ countDown: this.state.countDown + 10 })}>
					Add 10 seconds
      			</button>
			</div>
		);
	}

	setup() {
		this.interval = setInterval(function () {
			this.countdown();
		}.bind(this), 1000)
	}

	countdown() {
		this.setState({ countDown: this.state.countDown - 1 });
	}
}

---

Custom Hooks

import React, { useState } from "react";

import useInterval from './useInterval';

export function CountdownWithUseInterval(props) {
	const [countDown, setCountdown] = useState(props.countDown);

	useInterval(function () {
		setCountdown(countDown => countDown - 1);
	}, 1000);

	return (
		<div>
			<p>{countDown} seconds</p>
			<button onClick={() => setCountdown(countDown + 10)}>
				Add 10 seconds
      		</button>
		</div>
	);
}

Custom Hooks - useInterval

import { useEffect } from 'react';

const useInterval = (fn, delay) => {
  useEffect(() => {
    const id = setInterval(fn, delay)
    return () => clearInterval(id)
  }, [])
}

export default useInterval;

 

 

https://github.com/pankod/react-hooks-example

pankod/react-hooks-example

 

클래스-컴포넌트-vs-함수형-컴포넌트 비교

 

https://clelab.io/course/react/%ED%81%B4%EB%9E%98%EC%8A%A4-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-vs-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

clelab - 나를 발전시키는 시간