[React]서버에서 받아온 데이터 객체 속성 undefined

이 문제는 비동기 처리와 관련된 이슈일 가능성이 많습니다. 서버로부터 데이터를 받아오는 것은 비동기적으로 동작하기 때문에, JavaScript는 response.data를 처리하면서 다음 코드로 넘어가게 됩니다. 만약 데이터를 받아오는데 시간이 걸린다면, `setPost(response.data.boards)` 가 실행되는 시점에서 `response.data`가 아직 정의되지 않았을 수 있습니다. 따라서 본문의 코드처럼 set 함수를 실행하는 위치에 따라 state가 업데이트 되지 않거나, 예상치 못한 에러가 발생할 수 있습니다. 'undefined'로 출력되는 이유도 이와 같습니다. 비동기 액션을 다룰 때 가장 간단한 해결 방법은 useEffect 훅을 사용하는 것입니다. ```javascript useEffect(() => { const fetchData = async () => { const response = await axiosInstance.get(`endpoint`); setData(response.data); setPost(response.data.boards); }; fetchData(); }, []); ``` useEffect 내부에서 비동기 함수를 호출하면 React는 기다리지 않고 render 함수를 계속해서 실행합니다. 그 후 비동기 작업이 완료되면 상태를 업데이트하고 컴포넌트를 리렌더링합니다. 여기서 유의해야 할 점은, useEffect의 두 번째 파라미터인 의존성 배열입니다. 이 배열에 값이 없으면 컴포넌트가 렌더링 될 때마다 Effect가 실행되지만, 비어있는 배열을 전달하면 컴포넌트가 마운트 될 때 한 번만 실행됩니다. 필요에 따라 상태나 프로퍼티를 의존성 배열에 추가하여 함수가 언제 실행될지 조절할 수 있습니다.