useEffect() 활용하기

1. useEffect(ar1, ar2)

- compenent 안에서 특정 데이터가 변경되었을 때만 실행시키고 싶을 때 사용합니다.

- ar1: 우리가 딱 한 번만 실행시키고 싶은 함수

- ar2: 변경된 값을 출력해줍니다. 이때 값을 [] 안에 1개 이상 넣을 수 있습니다.

import {useState, useEffect} from react;
//...
const [keyword, setKeyword] = useState('');
const onChange = (event) => setKeyword(
  console.log(event.target.value);
);

useEffect(()=>{
  console.log('Search for', keyword);
}, []);

- 위 코드는 []에 아무것도 안 넣으면 '이 함수를 딱 한 번만 실행하고 다시는 하지 말아라.' 라는 의미입니다.

 

import {useState, useEffect} from react;
//...
const [keyword, setKeyword] = useState('');
const onChange = (event) => setKeyword(
  console.log(event.target.value);
);

useEffect(()=>{
  console.log('Search for', keyword);
}, [keyword]);

- 위 코드는 []에 값을 넣어줘서 변경된 값이 출력됩니다.

 

2. useEffect 첫 번째 함수에 조건을 넣을 수 있습니다.

- if문을 사용합니다.

- keyword가 빈 문자열이 아니고, 길이가 5보다 클 때 출력합니다.

useEffect = (()=>{
  if(keyword !== "" && keyword.length > 5) {
    console.log('Search for', keyword);
  }
}, [keyword]);