리액트 useEffect에서 의존성 배열을 사용하는 경우, 의존성 배열에 추가하지 않아도 되는 것

 

모든 컴포넌트 재평가 후에 특정 의존성이 변경되는 경우 => 의존성 배열에 의존성으로 추가하면 된다. 

 

기존 코드

const Login = (props) => {
  const [enteredEmail, setEnteredEmail] = useState("");
  const [emailIsValid, setEmailIsValid] = useState();
  const [enteredPassword, setEnteredPassword] = useState("");
  const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

 
  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
    setFormIsValid(
      event.target.value.includes("@") && enteredPassword.trim().length > 6
    );
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
    setFormIsValid(
      event.target.value.includes("@") && enteredPassword.trim().length > 6
    );
  };
  
  ...

 

👇 useEffect를 사용해서 한 곳에서 하나의 로직으로 폼이 유효한지 또는 유효한지 않은지 표시하기

 

const Login = (props) => {
  const [enteredEmail, setEnteredEmail] = useState("");
  const [emailIsValid, setEmailIsValid] = useState();
  const [enteredPassword, setEnteredPassword] = useState("");
  const [passwordIsValid, setPasswordIsValid] = useState();
  const [formIsValid, setFormIsValid] = useState(false);

  useEffect(() => {
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, []);
  
  const emailChangeHandler = (event) => {
    setEnteredEmail(event.target.value);
  };

  const passwordChangeHandler = (event) => {
    setEnteredPassword(event.target.value);
  };
  
  ...

 

하지만 위의 코드는 의존성 배열이 없기 때문에 (그저 빈 배열)이펙트가 새로 실행될 때 딱 한번 실행된다. 

여기서 setFormIsValid()를 재평가하고 유효성 검사 state 설정 함수를 다시 실행해야 한다. 이메일 및 비밀번호 변경 핸들러의 모든 키 입력에 대해서!

 

tip!

 

의존성 배열이 아예 없는 경우 ([]) 이런 식으로 빈 배열조차 없는 경우 컴포넌트가 다시 렌더링될 때마다 다시 실행된다. 

그리고 안에 state를 설정하기 때문에 (setFormIsValid()) 재랜더링 주기 자체를 트리거해서 무한 루프가 발생한다. 

 

 

---

우리가 원할 때 이펙트가 실행되길 원한다면 사이드 이펙트 함수에서 사용하는 것을 의존성으로 추가하면 된다. 

useEffect(() => {
    setFormIsValid(
      enteredEmail.includes("@") && enteredPassword.trim().length > 6
    );
  }, [setFormIsValid, enteredEmail, enteredPassword]);

 

👉 모든 Login 컴포넌트 함수 실행 후에 이 useEffect 함수를 다시 실행하세요.

다만 setFormIsValid, enteredEmail, enteredPassword 가 마지막 컴포넌트 렌더링 주기에서 변경된 경우에만요!

사실 setFormIsValid 는 생략가능하다. 왜냐면 state 업데이트 함수는 기본적으로 리액트에 의해 절대 변경되지 않도록 보장되기 때문이다. 

 

sideEffect는 보통 HTTP 리퀘스트 등인데, 다른 예 중에 키 입력을 듣고 입력된 데이터를 저장하는 것도 있고, (emailChangeHandler)

그리고 그에 대한 응답으로 다른 액션을 실행하는 것도 있다. 즉, 이메일 또는 비밀번호 필드의 키 입력에 대한 응답으로 해당 폼의 유효성을 확인하고 업데이트 하는 것 또한 sideEffect라고 할 수 있다. 사용자 입력 데이터의 sideEffect 이다. 

 

어떤 액션에 대한 응답으로 실행되는 액션이 있다면 그것은 사이드 이펙트이다. 그때 useEffect가 도움이 된다. 

 

 

추가공부

의존성 배열에 추가하지 않아도 되는 것

 

1. 상태 업데이트 기능을 하는 함수 // react가 절대 변경되지 않도록 보장함

2. 내장 API 또는 함수 ex) fetch(), localStorage

3. 외부에서 정의한 변수나 함수

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓