React 에서 useEffect 함수 사용방법

React 에서 useEffect 함수 사용하는 예시입니다.

useState 가 사용되었지만 참고사항으로 보시면 될것 같구요.

useEffect 는 처음에 기본적으로 한번 실행이 되고

나중에 변수값이 업데이트가 될때마다 실행이 되게 되는데요.

여기서 사용되는 변수의 이름은 currentCount 입니다.

 

 

버튼을 클릭할때마다 값이 1 씩 증가되는데요.

(props.incrementBy 값은 버튼 속성으로 설정된 값입니다.)

그 값이 10 이상이 되면 다시 0 으로 초기화 시키는 역할을

useEffect 를 통해서 처리하게 됩니다.

 

useEffect 함수 첫번째 파라메터에는 콜백함수를 지정하게 되고

두번째 파라메터에는 해당되는 변수들의 리스트를 지정을 해야합니다.

두번째 파라메터 부분이 엄청 중요하니 꼭 기억하셔야 합니다.

아무것도 적지 않으면 디폴트로 딱 한번만 실행이 됩니다.

 

즉 useEffect 함수는 React 에서 업데이트 되어지는 변수값을

컨트롤 하기 위한 방법이라 생각하시면 될것 같습니다.

---

MyButton.js

 

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

import "./MyButton.css"

 

const MyButton = (props) => {

    

    const [currentCount, setCurrentCount] = useState(0)

 

    const handleClick = () => {

        setCurrentCount(currentCount+props.incrementBy)

    }

 

    useEffect(() => {

        console.log("only called when component mounts")

    }, [])

 

    useEffect(() => {

        console.log("Use Effect function called.")

        if(currentCount >= 10)

            setCurrentCount(0);

    }, [currentCount])

 

    const countStyle = {

        color: "blue",        

    }

 

    return (

        <div>

            <button onClick={handleClick}>+{props.incrementBy}</button>

            <div style={countStyle} className="MyButtonStyle">{currentCount}</div>

        </div>

    )

 

}

 

export default MyButton;

 

---

MyButton.css

 

.MyButtonStyle{

    /* border:1px solid black; */

    width:50px;

    margin:0 auto;

    padding:5px;

    font-weight: bold;

    font-size: 20px;

}

---

App.js

 

import './App.css';

import MyButton from './component/MyButton/MyButton';

 

function App() {

 

  let subject = 'My React';

  

  return (    

    <div className="App">

      

      {subject}

      

      <MyButton incrementBy={1} />

      <MyButton incrementBy={10} />

      <MyButton incrementBy={20} />

 

     

    </div>

    

  );

}

 

export default App;