react에서 setState 함수의 비동기적 처리 특징 기억해두기

react에서 useState로 만든 state에 대해 상태 변경을 위해 setState 함수를 사용하는데

 

이게 비동기적으로 처리된다는 특징이 있다

 

그래서 setState로 상태 변경을 하고 console.log로 전후 비교해도 상태가 안바뀌는 것을 확인할 수 있다

 

const [board,setBoard] = useState({});

const data = {id:state};

const response = await axios.get('/get/one',{
  params: data})

console.log(response.data);

console.log(board)
setBoard(response.data); // 데이터는 response.data 안에 들어있습니다.
console.log(board);

 

 

이게 실제로 찍어보면..

 

 

 

전 후로도 board가 {} 빈칸으로 찍힌다

 

이거가지고 처리하는 방법이 여러가지가 있는 것 같더라고

 

근데 일단 나 같은 경우는 문제가 안돼

 

그냥 useEffect()로 페이지 렌더링되면 한번 board 변경시키고 페이지에 표시하면 끝이라

 

const Board = () => {
  const { state } = useLocation();

  //console.log(state);
  const [board, setBoard] = useState({});
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchUsers = async () => {
      try {
        // 요청이 시작 할 때에는 error 와 users 를 초기화하고
        setError(null);
        //setBoardlist(null);
        // loading 상태를 true 로 바꿉니다.
        setLoading(true);
        const data = {id:state};
        //console.log(data);
        const response = await axios.get('/get/one',{
          params: data})

        console.log(response.data);
        
        console.log(board)
        setBoard(response.data); // 데이터는 response.data 안에 들어있습니다.
        console.log(board);
       
      } catch (e) {
        setError(e);
      }
      setLoading(false);
    };

    fetchUsers();
  }, []);



  return(
    <div>
      <div className="boardList-header">
        전체 게시물 📝
      </div>
      <div className="boardList-body">
        {
          <h1>key={board.id} date={moment(board.created_at).format('YYYY-MM-DD')}
                title={board.title} content={board.content}
                board_id={board.id} img_url={board.imageUrl}
          </h1>
        }
      </div>

      <h1>안녕하세요{state}</h1>
      <h1>안녕하세요</h1>{state}
      <h1>안녕하세요</h1>{state}
      <h1>안녕하세요</h1>{state}
      <h1>안녕하세요</h1>{state}
      </div> 
  )
}

export default Board

 

 

페이지 렌더링 될때 useEffect() 중에는 console.log가 더 빨리 찍혀가지고 board가 빈칸이 되는데

 

useEffect() 끝나고는 board에 response.data가 들어가다 보니까 페이지에 정상적으로 페이지에 board가 표시가 된다

 

근데 이게 구성에 따라 문제가 되는 경우가 있을 수가 있어

 

그럴때 인자로 함수형으로 준다거나

 

useEffect() 의존성 배열에 [] 빈배열 말고 [board]를 줘서 board가 변할때마다 수행되도록 바꾼다거나..

 

정 안되면 setState 쓰지 말고 response.data 그 자체로 사용하던지..

 

인터넷 찾아보면 많이 나오니까 필요하면 다시 공부하도록

 

 

React Hooks에서 SetState 비동기 해결하기 (velog.io)

React Hooks에서 SetState 비동기 해결하기

 

 

React Hooks에서 SetState 비동기 해결하기 (velog.io)

 

React Hooks에서 SetState 비동기 해결하기