심재운 블로그

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() 함수

자바스크립트에서 특정 DOM 을 선택해야할 때는 DOM Selector를 사용한다. 리액트 프로젝트에서도 특정 요소의 크기를 가져온다거나, 포커스를 설정해야한다거나 특정 DOM을 선택해야할 상황이 있다

xiubindev.tistory.com

 

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

 

const [countDownsetCountdown] = useState(props.countDown);

 

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

 

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

 

React Hooks : useState() 함수

리액트 컴포넌트에서 동적인 값을 상태(state) 라고 부른다. 사용자 인터랙션을 통해 컴포넌트의 상태값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요하다. React Hooks 가 나오기 이전에는

xiubindev.tistory.com

 

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() 함수

useEffect 함수는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다. useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때, 특정..

xiubindev.tistory.com


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

React Hooks Example. Contribute to pankod/react-hooks-example development by creating an account on GitHub.

github.com

 

이 글을 공유합시다

facebook twitter kakaoTalk kakaostory naver band

본문과 관련 있는 내용으로 댓글을 남겨주시면 감사하겠습니다.

비밀글모드