[React] useEffect

useEffect

useEffect는 컴포넌트가 렌더링 이후에 특정 작업을 수행하도록 설정 할 수 있습니니다.
자세한 내용은 React 공식 문서에서 확인 가능합니다.

https://ko.reactjs.org/docs/hooks-effect.html

[Using the Effect Hook – React

A JavaScript library for building user interfaces

ko.reactjs.org](https://ko.reactjs.org/docs/hooks-effect.html)

useEffect 사용해보기

Example.js

	import React, { useState, useEffect} from "react";
	const Example = () => {
	const [state, setState] = useState(0);
	const onChange = () => {
	setState(state + 1)
	}
	useEffect(() => {
	console.log('+1')
	})
	return (
	<>
	<p>{state}</p>
	<button onClick={onChange}>+1</button>
	</>
	)
	}
	export default Example

view raw Example.js hosted with ❤ by GitHub

App.js

	import React from "react";
	import Example from "./componets/Example";
	const App = () => {
	return (
	<Example/>
	)
	}
	export default App;

view raw App.js hosted with ❤ by GitHub

실행화면

+1 버튼을 누르면 값이 변하고 리렌더링이 됩니다.

useEffect가 리렌더링될 때 마다 실행되는것을 확인할 수 있습니다.

 

전체 소스코드는 github에서 확인가능합니다.

https://github.com/hanhyung6376/learn-react/tree/master/use-effect