[리액트] state 업데이트 느린 경우_💡 / useState, useEffect

 

[React_ useEffect 활용하기]

 

useState 업데이트가 한 박자씩 느린 경우를 해결하는 방법을 알아보자

 

---

 

<STUDY>

 

리액트 useState를 사용하여 state를 업데이트 하다보면 한 박자 씩 느리게 나오는 되는 경우가 있다.

 

useEffect를 사용하면 된다고 해서 사용을 해 보았는데 똑같은 결과가 출력되었다.

 

   - App.jsx

import React, { useState } from 'react';
imoprt DataPage from './dataPage';

export default function App () {

  const [data, setData] = useState(
    {
      name: null,
      age: null,
      job: null,
    }
  );
  
  // state 업데이트 함수
  const updateData = (item) => { setData({ ...data, item }) };
  
  return (
    <DataPage updateData={updateData} data={data} />
  )
}

 

   - DataPage.jsx

import React, { useEffect } from 'react';

export default function DataPage (props) {
  const newData = {
    name: 'ttugttag',
    age: 20,
    job: 'student',
  }
  
  useEffect(() => {
    props.updateData(newData);
    console.log(props.data);
  }, []);
  
  return (
    ``````
  )
}

 

state를 업데이트하고 로그를 찍어보았을 때,

이렇게 출력되었다.

 

이유는 useState가 비동기적으로 동작하기 때문이었다!

 

useEffect를 사용하면 된다고 해서 사용해 보았는데도 제대로 동작하지 않았다....

 

 

❓ 해결방법

 

    💡 useEffect 활용하기

import React, { useEffect } from 'react';

export default function DataPage (props) {
  const newData = {
    name: 'ttugttag',
    age: 20,
    job: 'student',
  }
  
  useEffect(() => {
    props.updateData(newData);
    console.log(props.data);
  }, [props.data]);
  
  return (
    ``````
  )
}

 

   - useEffect의 [] 안에 props.data를 넣어주어 data가 업데이트 될 때마다 state 업데이트 함수를 실행시켜 주면 된다.

 

 

제대로 나온다 :)

 

---

 

처음 코드가 제대로 동작하지 않았던 이유는 [] 안에 아무 값도 넣어주지 않아서

페이지가 렌더링 되고 한 번만 실행되었기 때문이었다.

 

다음부터는 당황하는 일이 없도록 기록기록 해두자!

 

 

---

 

내가 보려고 정리하는 리액트🔆

 

👉ez1n github 구경하기👈 

 

ez1n - Overview