의존성 배열(dependency array) 이란?

의존성 배열(dependency array) 이란?

// useEffect의 두번째 인자가 의존성 배열이 들어가는 곳 입니다.
useEffect(()=>{
	// 실행하고 싶은 함수
}, [의존성배열])

useEffect에는 의존성 배열이라는 것이 있습니다. 말이 조금 어렵죠? 쉽게 풀어 얘기하면 “이 배열에 값을 넣으면 그 값이 바뀔 때만 useEffect를 실행할게” 라는 것 입니다.

 

코드로 보는 의존성 배열 → 의존성 배열이 빈 배열인 경우우리가 위에 보았던 코드와 동일한 코드 입니다. 다만 useEffect에 의존성 배열만 추가했지요. 이것을 추가함으로 어떻게 될까요?

// src/App.js

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, []); // 비어있는 의존성 배열

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

의존성 배열에 빈 배열 [ ] 을 넣은 경우영상을 보면, 우리가 input에 어떤 값을 입력하더라도, 처음에 실행된 hello useEffect외에는 더 이상 실행이 되지 않는 것을 볼 수 있습니다. 이렇게 useEffect를 사용하는데, 어떤 함수를 컴포넌트가 렌더링 될 때 단 한번만 실행하고 싶으면 의존성 배열을 [ ] 빈 상태로 넣으면 됩니다.

 

코드로 보는 의존성 배열 → 의존성 배열에 값이 있는 경우

// src/App.js

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

const App = () => {
  const [value, setValue] = useState("");
  useEffect(() => {
    console.log("hello useEffect");
  }, [value]); // value를 넣음

  return (
    <div>
      <input
        type="text"
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </div>
  );
}

export default App;

 

 출처 - 스파르타코딩클럽(항해99과정):https://hanghae99.spartacodingclub.kr/