[ReactJS_Complete] React.useEffect()

이 글은 [[한글자막] React 완벽 가이드 with Redux, Next.js, TypeScript]를 수강하며 정리한 글입니다.

 

 

⚛️ 기본 환경: IDE: VS code, Language: React

 

 

React.useEffect()

: 모든 컴포넌트가 렌더링된 이후 특정 작업을 실행시켜주는 Hook

: HTTP request, Browser 저장소에 저장 등 sideEffect를 처리

 

* useEffect(function, dependencies)

 - function: 수행하고자하는 작업

 - dependencies: 의존성 배열, 업데이트를 의존시키고 싶은 값 설정

 

 

1. useEffect(function)

: Rendering시마다 실행

 

2. useEffect(function, [])

: Component를 첫 rendering 시에만 실행

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

❌ 올바른 입력값 형식에도 불구하고, 첫 rendering에만 useEffect()가 실행되므로 Login Btn이 활성화되지 않음

 

3. useEffect(function, [dependencies])

: dependencies에 선언된 변수값이 변할 때마다 rendering

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

⭐ 단, 함수를 추가할 경우, function()으로 작성하면 결과값이 의존성에 추가되므로 function으로 작성하여 함수 자체를 의존성에 추가해야 함

 

4. setTimeout(() => {}, sec)

: 어떤 함수를 실행하기 전에 sec만큼 대기

  useEffect(() => {
    setTimeout(() => {
      console.log('Checking Form Validation');
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );  
    }, 500); // 0.5s씩 지연되어 setFormIsValid 실행
 
  }, [enteredEmail, enteredPassword]);
 

 

5. cleanUp function

: return () => {]

: 첫번째 useEffect()가 실행되고 난 이후, useEffect 함수가 다시 실행되기 전에 실행

  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('Checking Form Validation');
      setFormIsValid(
        enteredEmail.includes('@') && enteredPassword.trim().length > 6
      );  
    }, 500); // 0.5s씩 지연되어 setFormIsValid 실행
 
    return () => {
      console.log('CLEANUP');
      clearTimeout(identifier);
    };
 
  }, [enteredEmail, enteredPassword]);
 

⭐ cleanUp 함수를 통해서 setFomisVallid가 0.5초 뒤에 실행되지 전에 timer를 초기화시켜서 과도하게 formIsValid가 실행되는 것을 방지할 수 있음

⭐⭐ [dependencies] 값을 유효성 검사를 충족시켰는지 여부에 따른 변수로 선언 시 useEffect() 호출을 줄일 수 있음

  const {isValid: emailIsValid} = emailState;
  const {isValid: pwdIsValid} = pwdState;
  // 객체 destructuring (value, alias)
 
  useEffect(() => {
    const identifier = setTimeout(() => {
      console.log('Checking form validity!');
      setFormIsValid(
        emailIsValid && pwdIsValid
      );
    }, 500);
 
    return () => {
      console.log('CLEANUP');
      clearTimeout(identifier);
    };
  }, [emailIsValid, pwdIsValid]);
 

 

 

 

참고 자료

React Hooks : useEffect() 함수