React hooks(UseEffect) 사용하기

React hooks(UseEffect) 사용하기

저번에는 useState를 사용하는 방법을 알아봤습니다. 이번에는 UseEffect를 사용해보겠습니다. 

부족한 영어 실력으로 document를 읽어 보고 있는데 간단히 생각하면 

ComponentDidMount

ComponentDidUpdate

ComponentWillUnMount가  작동할 때 함수들이 한번에 사용할 수 있게 만들어 준 것이 useEffect입니다. 

Dom이 업데이트되거나, state가 바뀐 뒤 useEffect가 실행됩니다.

Hooks 규칙

1. 리액트 함수의 제일 상단에 작성해야합니다. 

- 조건문, 내부 함수, 반복문 안에 사용하지 않습니다.

2. 리액트 함수 안에서만 사용합니다. 

- custom 함수 안에서는 예외적으로 호출 할 수 있습니다.

ex)

const [name, setName] = useState("");

useEffect(()=>{

document.title = `search search search my ${name}`;

});

예제 코드

input이나 버튼을 누를때 마다 useEffect가 사용됩니다. useEffect 옆에 배열 형태로 뭐가 붙어있습니다. useEffect는 모든 dom의 변화에 맞추어 실행되는데 뒤에 state값을 설정 해주면 이전과 값이 변했을 때만 useEffect가 실행되게 됩니다. 

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

const App = () => {

const [count, setCount] = useState(0);

useEffect(() => {

console.log(count);

// Update the document title using the browser API

document.title = `You clicked ${count} times`;

}, [count]);

const [name, setName] = useState("");

useEffect(() => {

console.log(name);

}, [name]);

const onChangeName = e => {

const {

target: { value }

} = e;

setName(value);

};

return (

<div>

<p>You clicked {count} times</p>

<button onClick={() => setCount(count + 1)}>Click me</button>

<input value={name} type="email" onChange={onChangeName} />

</div>

);

};

export default App;

동시에 실행되지 않고 입력된 것만을 볼 수 있다. 만약에 뒤에 설정을 안해줬으면 둘다 실행됐을 것이다.

다음에는 custom hooks로 찾아오겠습니다.