useEffect

useEffect

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook 이다.

• useEffect Hook을 이용하여 우리는 리액트에게 컴포넌트가 렌더링 이후에 어떤 일을 수행해야하는 지를 알려준다.

UseEffect의 사용법

• UseEffect는 매개변수로(callback 함수, DependencyList)를 받는다

실행시점

• App()함수가 최초 실행될때(마운트될 때)

function App() {

	const[data,setData]=useState(0);
    
     useEffect(()=>{
    console.log('useEffect실행됨')
    });

	 return(
     <div>
       <h1>데이터:{data}</h1>
       <button>더하기</button>
      </div>
  );
}

• 상태변수가 변경될때(그게 DependencyList에 등록되어 있어야함)

function App() {

	const[data,setData]=useState(0);
    
     useEffect(()=>{
    console.log('useEffect실행됨')
    });

	 return(
     <div>
       <h1>데이터:{data}</h1>
       <button onClick={()=>{setData(data+1)}>더하기</button>
      </div>
  );
}

if 실행될때 초기 값을 load하는 상황이면

function App() {

	const[data,setData]=useState(0);
    
     const download=()=>{
    //다운로드 받고(통신)
    let downloadDat=5;//가정
    setData(downloadDat);
  }
  
     useEffect(()=>{
    console.log('useEffect실행됨')
    });

	 return(
     <div>
       <h1>데이터:{data}</h1>
       <button onClick={()=>{setData(data+1)}>더하기</button>
      </div>
  );
}

->초기값은 5로 출려되며 더하기를 누르면 상태변수가 변화하기때문에 useEffect는 계속실행인 되어서 값은 data+1이 아닌 5로 출력된다

->useEffect()는 콜백함수와DependencyList(list타입) 지정할수있음
위 경우 DependencyList에 []을 넣어주면 useEffect가 최초한번만 실행된다

function App() {

	const[data,setData]=useState(0);
    
     const download=()=>{
    //다운로드 받고(통신)
    let downloadDat=5;//가정
    setData(downloadDat);
  }
  
     useEffect(()=>{
    console.log('useEffect실행됨')
    },[]);

	 return(
     <div>
       <h1>데이터:{data}</h1>
       <button onClick={()=>{setData(data+1)}>더하기</button>
      </div>
  );
}

->[]을 사용하면 최초 한번만 실행되지만 내가 원할때 실행시키고 싶을 땐 DependencyList 설정해주면됨

function App() {

  const[data,setData]=useState(0)
  const[search,setSearch]=useState(0);

  const download=()=>{
    //다운로드 받고(통신)
    let downloadDat=5;//가정
    setData(downloadDat);
  }


  //실행시점:(1)App()함수가 최초 실행될때(마운트될 때)
  //        (2)상태변수가 변경될때(그게 DependencyList에 등록되어 있어야함)
  useEffect(()=>{
    console.log('useEffect실행됨')
    download();
  },[search]);//->search에 의존적이라는 뜻으로 search값이 변경이일어나면 useEffect가 실행됨
              //->[]빈칸이면 아무되도 의존하지 않는다 그럼으로 최초 실행된후 실행되지않음
  return(
     <div>
       <button onClick={()=>{setSearch(3)}}>검색</button>
       <h1>데이터:{data}</h1>
       <button onClick={()=>{setData(data+1)}}>더하기</button>
       <Sub/>
        {num}
      </div>
  );
  }

export default App;

->useEffect에 search의 값이 변경될때 실행되도록 의존성을 부여하면
검색 버튼을 누르게되면 search의 값이 변경되며 useEffect가 실행된다

< 참고 >
import 종류
import Sub from './Sub';//외부 파일을 import
import {num} from './Sub';//외부에서 선언한 변수를 import