[React] 리액트 훅( useEffect )

 

https://hyunu0504.github.io/blog9/

React App

 

 

 

 

 

 

 

 

 

 

useEffect 사용법

 

 

useState와 마찬가지로 useState를 import 해준다.

 

 

 

 

 

 

 

 

 

useEffect는 컴포넌트가 처음에 처음에 mount될때, 업데이트될때, unmount될때 사용한다.

 

useEffect는 랜더링이 다 되면 실행되기 때문에 오래걸리는 작업에 사용한다.

 

useEffect는 인자로 콜백함수를 받는다.

 

 

 

 

첫번째 경우

useEffect( () => { //실행할 코드 } )

 

1. mount될때

 

2. 재랜더링될때 실행된다.

 

 

 

 

 

두번째 경우

useEffect( () => { //실행할 코드 } , [ value ] )

1. mount될때,

 

2. Dependency array 내부의 값이 변경될때 실행된다.

 

value를 감싸고 있는 배열을 Dependency array라고 한다.

 

 

 

 

세번째 경우

useEffect( () => { //실행할 코드 } , [  ] )

Dependency array안의 값이 비어있으면

 

1 mount될때만 실행된다.

 

 

 

 

네번째 경우

  useEffect( () => {   
    //실행할 코드
    return () => { //제거를 실행한 코드 }
  } , [  ] })

 

Clean Up

 

useEffect의 return값으로 함수를 리턴해주면

 

return안의 값은 useEffect안의 코드보다 먼저 실행되기 때문에

 

1. useEffect가 실행되기 이전에 실행할때

 

2. unmount될때 실행된다.

 

 

 

 

 

 

 

https://hyunu0504.github.io/blog9/

 

 

 

1.노란색 박스는 3초후에 사라지는 박스를 useEffect안에

setTimeout 3초로 설정하고 배열에 빈값을 대입해서

 

첫 랜더링때만 작동하도록 했다.

 

 

 

2. 빨간색 박스는 현재 콘솔창에 1초마다 출력하는것을 나타낸다.

 

아래 버튼을 눌러서 1초마다 출력되는것을 on/off 할 수 있다.

 

useEffect안에 1초마다 코드를 실행하는 setInterval을 설정하고 

 

Clean Up을 하기 위해서 return값으로 함수를 리턴해줬다.

 

그 안에는 clearInterval을 사용해서 setInterval을 중지시켰다.

 

 

 

 

 

App 컴포넌트

import "./App.css";
import styled from "styled-components";
import { useEffect, useState } from "react";
import Timer from "./timer";

const CountBox = styled.div`
  background-color: yellow;
  color: red;
  padding-top: 30px;
  padding-bottom: 30px;
`;
const Btn = styled.button`
  padding: 30px;
`;

function App() {
  const [count, setCount] = useState(true);
  const [show, setShow] = useState(true);

  useEffect(() => {
    let f = setTimeout(() => {
      setCount(false);
    }, 3000);
  }, []);

  return (
    <div className="App">
      {count == true ? <CountBox>3초 후 사라지는 박스</CountBox> : null}
      {true == show ? <Timer></Timer> : null}
      <Btn onClick={() => setShow(!show)}>on/off 버튼</Btn>
    </div>
  );
}

export default App;

 

 

 

 

Timer 컴포넌트

import { useEffect, useState } from "react";
import styled from "styled-components";

const OnOffBox = styled.div`
  background-color: red;
  padding: 30px 0px 30px 0px;
  font-size: 32px;
  font-weight: bolder;
  margin-bottom: 100px;
`;

function Timer() {
  useEffect(() => {
    const stop = setInterval(() => {
      console.log("1s");
    }, 1000);
    return () => {
      clearInterval(stop);
      console.log("정지됨");
    };
  }, []);

  return (
    <div>
      <OnOffBox>1초마다 콘솔창에 '1s'출력</OnOffBox>
    </div>
  );
}

export default Timer;