#React useEffect 사용법

이번 시간에는 useEffect를 사용해 보겠다

 

useEffect란?

최초 실행을 할때와 내가 원하는 시점에 실행되게끔 하는 함수이다

 

이렇게 말하면 모를 것 같으니 실습 바로 들어간다

 

1. Improt 하고. 함수 작성법

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

function App() {
 
  useEffect(() => {

  });

  return (
    <div className="App">
      
    </div>
  );
}

export default App;

 

일단 react에 있는 useEffect를 Import 해주고

 

그 밑에 다가 useEffect함수를 작성한다

 

2. 실습 재료 작성

 

useState에다가 숫자 아무거나 넣어서 하나 작성하고

 

useEffect에는 set함수를 통해 값을 넣어준다

 

그다음은 html 쪽에는 input에다가 state변수를 넣어주도록 하겠다

 

그리고 onChange 속성을 통해 state가 변하도록 함수를 하나 작성한다

 

그러면 브라우저를 보면

 

input값과, 콘솔에는 useEffect가 출력된 것을 볼 수 있다. 첫 실행과 동시에 useEffect함수가 실행 됐다는 것을 볼 수 있다

 

3. 실습 시작

 

값을 바꾸려고 했는데, 숫자는 계속 0이고, Console창에는 useEffect가 계속 출력되었다

 

그 이유는 state가 바뀔 때, 무조건 useEffect도 같이 실행되는 점이고, useEffect함수에는 num을 0으로 값을 넣기 때문이다

그럼 한 번만 작동하게 해 볼까?

 

useEffect 함수의 끝부분에 [] 하나만 추가하면, 실행 시 딱 한 번만 실행되게 한다.

 

 

 

 

그럼 내가 원할 때 실행되게 할 수 있을까?

 

우선 새로운 useState를 생성한 뒤 html에 버튼도 추가한다. 내가 원할 때 되돌리는 마법을 쓰기 위해

button이 오타났다,, 님들은 나처럼 손가락 삐꾸가 아니길 바란다. 그리고 초기화 저거도 <button>초기화</button> 으로 하자...

 

그리고 아까 [] 빈 값이었던 곳에 state 변수를 넣어주면 그 state변수가 변할 때, 그리고 초기 실행 시에만 실행된다

 

 

브라우저로 가보자

 

숫자를 계속 올려도 Console에는 useEffect가 찍혀 있지 않다

 

그럼 초기화를 누르면?

값이 0으로 돌아왔고, Console에도 useEffect가 한번 더 찍혀있는 것을 볼 수가 있다.

 

이렇게 해서 useEffect에 대해서 공부하였다

 

유용하게 쓰일 수 있을 거 같다. 예를 들면 다선 택해놓고 새로고침 없이 초기화를 하던지 등등