react 기초 (useEffect)

기본형태

useEffect(function, deps)

function 실행하고자 하는 함수

deps: 배열 형태, function을 실행시킬 조건, deps에 특정값을 넣게 되면 컴포넌트가 mount 될때, 지정한 값이 업데이트될 때 useEffect를 실행합니다.

 

useEffect는 두 개의 argument(전달인자)를 가지는 function(함수)이다.

 

1. 선언 방법

첫번째 인자는 함수, 두번째 인자는 배열(array)이 들어간다.

 

  useEffect(() => {
    console.log("한번만 실행되는 useEffect");
  }, []);

useEffect가 필요한 이유부터 간단하게 설명하자면 컴포넌트를 리렌더링할때 보면 안에 있는 console.log()또한 매번 찍히는 것을 확인 할 수 있다. 이는 원하는 바가 아닐 경우가 있다.

 

위에 경우 console.log()가 초기에 렌더링이 될때만 실행이 되고 그 이후로는 컴포넌트가 리렌더링이 됐을때 console.log()를 호출하지 않을것이다. 이유는 2번째 인자인 배열이 비여있기때문이다.

deps 부분을 생략한다면 해당 컴포넌트가 리렌더링될때 한번만 실행이되고 특정값이 업데이트될 때만 실행하고 싶으면 deps위치의 배열안에 실행 조건을 넣어주면된다.

 

  const onChange = (event) => setKeyword(event.target.value);
  
  useEffect(() => {
    if (keyword !== "" && keyword.length > 3) {
      console.log("검색 중", keyword);
    }
  }, [keyword]);
  
  return (
  	<div>
    	<input
        onChange={onChange}
        value={keyword}
        type="text"
        placeholder="검색해주세요"
      />
    </div>
  )

 

useEffect의 첫번째 인자인 function에는 키워드가 비어있지않고, 길이가 3이상이면 console.log()를 보여달라는 내용이며 
두번째 인자인 array에는 'keyword의 값이 업데이트 될때' useEffect()의 첫번째 인자(function)을 실행시켜달라는 내용이다.