[React] useEffect()에 대해서

useEffect()는 코드의 실행 시점을 관리할 수 있는 함수이다.

 

useEffect()는 두 개의 argument를 가지고 있는데,  첫 번째 argument는 우리가 실행하고 싶은 코드가,

두 번째 argument에는 [] 배열(dependency)이 있다.

 

두 번째 argument에 무엇이 들어가느냐에 따라 실행 결과가 달라지는데,

 

1. 빈 배열을 넣는 경우 -> 최초 1회 랜더링 될 때만 실행한다.

2. [a] -> a가 변경될 경우만 랜더링한다.

3. [a, b] -> a나 b중 하나가 값이 변경 될 때 랜더링한다.

 

useEffect()를 사용하여 불필요한 렌더링과 작업을 방지할 수 있다.

 

 

예시 코드

const onChange = (event) => setKeyword(event.target.value);
  useEffect(() => {
    console.log("I run only once.");
  }, []);
  
  useEffect(() => {
      console.log("I run when 'keyword' changes.");
  }, [keyword]);
  
  useEffect(() => {
    console.log("I run when 'counter' changes.");
}, [counter]);

useEffect(() => {
  console.log("I run when keyword and counter change.");
}, [keyword,counter]);

---

위 내용은 노마드코더의 'ReactJS로 영화 웹 서비스 만들기' 강의에서 알려준 내용 중 일부를 포함하고 있습니다.

React에 대해서 자세하고 친절하게 가르쳐주셔서 만족하면서 듣고 있습니다.

(밑에 링크로 들어가면 수강할 수 있습니다. 무료 강의 입니다.)

https://nomadcoders.co/react-for-beginners

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders