초기 렌더링 및 변수 변환에 따른 기능을 불러오기 위한 "useEffect"

UseEffect 란. 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook임.

​

기존에는 클래스형 컴포넌트에서만 생명주기 메소드를 사용할 수 있었는데.

useEffect를 쓰면 함수 컴포넌트에서도 side effect 를 쓸 수 있게 되었다.

라이프사이클 hook(componentDidMount, componentDidUpdate, componentWillUnMount)을 대체할 수 있는 useEffect.

 

사용 방법

import { useEffect } from 'react';

function useeffecttest() {

  // 사용법 1. 종속성 매개변수 없음.
  useEffect(() => {
    DoSomething();
  });

  // 사용법 2. 빈 종속성 매개변수
  useEffect(() => {
    DoSomething();
  }, []);

  // 사용법 3. 일부 종속성 매개변수 배열
  useEffect(() => {
    DoSomething();
  }, [counter1, counter2]);
}

 

1. 선언. 첫번째 인자는 함수, 두번째 인자는 배열이 들어감.
2. function 안에 있는 사용법 형태 중에 하나를 골라 원하는 곳에서 사용!

 

각 사용법에 대한 설명

 

사용법 1. 종속성 매개변수가 없는 useEffect()

    useEffect ( () => { 
        DoSomething (); 
    });

 

렌더링 이후에 실행할 함수. 화면 렌더링이 될 때마다 실행이 됨.

설명하자면 componentDidMount 와 componentDidUpdate 를 함께 표현한 개념.

 

사용법 2. 빈 종속성 매개변수 배열이 있는 useEffect()

    useEffect ( () => { 
        DoSomething (); 
     }, []) ;

 

빈 배열을 선언할 시, 초기 렌더링 시 한번만 실행된다.

C# 으로 비교를 하자면 FormLoad() 이벤트의 개념이라고 보면 된다.

 

사용법 3. 일부 종속성 매개변수 배열이 있는 useEffect()

    useEffect ( () => { 
        DoSomething (counter1, counter2); 
    }, [counter1, counter2]);

 

주의점. 매개변수 의 경우 useState() 혹은 Redux 같은 DOM 을 변경 시킬 수 있는 변수 형태여야 한다.

​

배열 안에 있는 매개변수 값의 변화가 일어날 때마다 useEffect 안의 내용이 실행된다.

C# 과 비교하면 propertychanged() 이벤트 혹은 propertychanging() 이벤트 와 유사하다.

 

 

예제

useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await AxiosCustomInstance({}).get(props.url);
        dataList = response.data; // dataList

        if (dataList && dataList.length > 0) {
          let newOptions = dataList.map((item) => ({
            value: item[valueName],
            label: item[labelName],
            name: props.name,
            ALL: item[valueName],
          }));

          let newArray = [newFirstElement].concat(newOptions);
          setOptions(newArray);

          // multiSelect 일 경우 defalut value 필요없음
          if (props.isMultiSelect !== undefined) {
            // value 프로퍼티를 ALL 프로퍼티에 할당
            newOptions.value = newOptions.ALL;

            // 기존 value 프로퍼티 제거
            delete newOptions.value;
            setArrayList(newOptions);
          }
        } else {
          // dataList가 없을 경우 Select/ALL만 바인딩
          setOptions([newFirstElement]);
        }
      } catch (error) {
        console.error("Error fetching " + props.name + ":", error);
      }
    };
    fetchData();
  }, []);

 

이런 식으로 화면 초기 값을 api 로 불러와 화면 셋팅을 해주는 데에 사용할 수 있다.

 

 

---

​공식 문서를 읽거나 개발하며 느꼈던 뇌피셜로 작성하고 있으니, 
궁금하신 점이나 잘못된 점이 있다면 댓글 남겨주시면 감사하겠습니다.