리액트 훅스 useEffect

이전에 useState와 함께 useEffect

 

useEffect는 렌더링이 될때마다 특정 작업 수행하도록 설정할수 있다!

 

아래는 버튼 클릭시 증가하는 간단한 코드

 

import React,{useEffect,useState} from 'react';
function App() {

  const [count,setCount]=useState(0);
  useEffect(()=>{
    console.log('effect');			//버튼 클릭시마다 실행되어 로그찍힘
  })
  console.log('rendering')
  
  const incre=()=>{
    setCount(count+1);
  }
  return (
      <div className="App">
       <h1>
         good!
       </h1>
       <button onClick={incre}>click</button> {count}
      </div>
  );
  }
export default App;

 

위는 값 변경시에 무조건 useEffect를 거친 반면 원하는 값에다가만 추가 가능

 

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

function App() {
  const [count,setCount]=useState(0);
  const [count1,setCount1]=useState(0);
  useEffect(()=>{
    console.log('effect count1');
  },[count1])			// count1 이 변경시에만 실행됨 
  
  const incre=()=>{
    setCount(count+1);
  }
  const incre1=()=>{
    setCount1(count1+1);
  }
  return (
      <div className="App">
       <h1>
         good!
       </h1>
       <button onClick={incre}>click</button> {count}
       <button onClick={incre1}>click</button> {count1}
      </div>
  );

  }

 

위와 달리 한번만 실행하는 useEffect

 

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

function App() {

  const [count,setCount]=useState(0);
  const [count1,setCount1]=useState(0);
  useEffect(()=>{
    console.log('effect count1');
  },[count1])

  useEffect(()=>{
    console.log('first');		// 처음 실행 이후 실행 안함
  },[])
  
  const incre=()=>{
    setCount(count+1);
  }
  const incre1=()=>{
    setCount1(count1+1);
  }
  return (
      <div className="App">
       <h1>
         good!
       </h1>
       <button onClick={incre}>click</button> {count}
       <button onClick={incre1}>click</button> {count1}
      </div>
  );

  }
export default App;

 

컴포넌트로 나누기

 

App.js

import React,{useEffect,useState} from 'react';
import Counter from './components/Counter';

function App() {
 return (
      <div className="App">
       {/* <h1>
         good!
       </h1>
       <button onClick={incre}>click</button> {count}
       <button onClick={incre1}>click</button> {count1} */}
       <Counter></Counter>
       <Counter></Counter>
      </div>
  );
  }
export default App;

---

Counter.js 

 

import React from 'react';
import { useState } from 'react';

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

    const incre=()=>{
        setCount(count+1);
    };

    return (
    <>
        <button onClick={incre}>onClick</button>
        {count}
    </>
    );
};

export default Counter;

 

 

깔끔하게 작성하는게 목표 :)