useEffect로 컴포넌트 변경 시 이벤트 실행

useEffect란?

useEffect Hook 함수를 사용하면 컴포넌트에서 특정 상태가 바뀔 때마다 원하는 코드를 실행할 수 있다. 또한, 컴포넌트가 마운트(가장 처음 화면에 나타남)되거나 언마운트(화면에서 컴포넌트가 사라짐)될 때 원하는 코드를 실행할 수도 있다.

 

 

데이터를 불러와서 상태를 업데이트하는 useEffect(예제 load 함수)를 작성할 때는 꼭 기존의 data를 저장(예제 save 함수)하는 useEffect보다 상단 위치에 코드를 작성해야 한다.

useEffect는 등록된 순서대로 작동하는데, 저장하는 useEffect가 먼저 호출되면 데이터의 초깃값을 저장한 다음 불러오기 때문에 초깃값만 불러오기 때문에 데이터를 업데이트하는 useEffect가 먼저 등록되어야 한다.

아래 코드는 컴포넌트에 변화가 있을때 AsyncStorage에 data를 저장하고 불러오는 예제다.

const [data, setData] = useState(" ... ");

useEffect(() => {
  try {
    async function load() {
      const savedDataString = await AsyncStorage.getItem('data');
      const savedData = JSON.parse(savedDataString);
      setData(savedData);
    }
    load();
  } catch (e) {
    console.log('Failed to load data');
  }
}, []);

useEffect(() => {
  async function save() {
    try {
      await AsyncStorage.setItem('data', JSON.stringify(data));
    } catch (e) {
      console.log('Failed to save data');
    }
  }
  save();
}, [data]);

코드를 보면 useEffect에 등록된 함수를 async 함수로 만들지 않고 내부에 async 함수를 따로 선언한 다음, 이를 호출하였다.

useEffect에는 정리(cleanup)하는 기능이 있는데, 함수에서 Promise를 반환하면 이 기능과 충돌이 생기기 때문에 useEffect에 등록한 함수는 async 키워드를 붙이면 안된다.

 

정리 기능은 컴포넌트가 언마운트되거나 컴포넌트가 업데이트되기 전에 특정 코드를 실행할 수 있는 기능으로, useEffect에서 함수 타입의 값을 반환하면 이 기능을 사용할 수 있다.

useEffect(() => {
  // 업데이트 된 후에 출력
  console.log(data);
  return () => {
    // 업데이트 되기 전에 출력
    console.log(data); // 업데이트 되기 전 data 값 출력
  }
}, [data]);

 

useEffect를 사용해 컴포넌트 마운트 또는 언마운트 시 특정 작업을 하고 싶다면 useEffect의 두 번째 파라미터에 비어있는 배열을 사용하면 된다. useEffect의 두 번째 배열이 비었으면, 컴포넌트가 마운트 될 때 딱 한 번만 함수가 호출된다.

useEffect(() => {
  console.log('컴포넌트가 마운트될 때 출력');
  return () => {
    console.log('컴포넌트가 언마운트될 때 출력');
  }
}, [])