오늘은 부모 컴포넌트에서 fetch를 통해 데이터를 받아와서 자식 컴포넌트로 props를 보낼 때 주의해야 할 사항을 알아 보겠습니다.
import PropsComponent from "./PropsComponent";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState("5초 전");
useEffect(() => {
setTimeout(() => {
setData("5초 후");
}, 5000);
}, []);
return (
<div>
<PropsComponent data={data}></PropsComponent>
</div>
);
}
export default App;
// 부모 컴포넌트
const PropsComponent = ({ data }) => {
return <div>{data}</div>;
};
export default PropsComponent;
// 자식 컴포넌트
useEffect를 통해 데이터를 요청하는 상황입니다.
편의를 위해 데이터 요청은 setTimeout으로 대체하겠습니다.
(setTimeout은 비동기적으로 작동합니다)
5초 뒤에 데이터를 받아온다고 가정하고 setData를 바꾸는 상황입니다.
useState 변경으로 인한 무한렌더링을 방지하기 위해 useEffect에는 empty array를 할당합니다.
App 페이지를 키면 데이터를 받아 오기 전에는 자식 컴포넌트에 '5초 전'이라는 문장이 뜰 것입니다.
컴포넌트가 이미 마운트 된 상황에서 useEffect를 실행하기 때문에 데이터를 받아오는 시간과 상관없이
첫 렌더링에는 '5초 전'이 출력됩니다.
.
컴포넌트 마운트 > useEffect 실행 > setTimeout 이 실행 되고
setTimeout은 비동기적으로 실행돼서 useState를 변경하기 때문에
5초 뒤에 자식 컴포넌트에 '5초 후'라는 문장이 뜨게 됩니다
여기서 비동기의 이점도 살펴볼 수 있습니다.
사용자는 데이터를 받아올 때까지 기다릴 필요없이 페이지에서 다른 상호작용이 가능합니다.
만약 비동기적으로 실행하지 않는다면 데이터를 받아오기 전까지 다른 작업이 불가능할 것입니다.
import { useEffect } from "react";
const PropsComponent = ({ data }) => {
useEffect(() => {
console.log("데이터를 받았어요!");
}, [data]);
return <div>{data}</div>;
};
export default PropsComponent;
만약 자식 컴포넌트에서 useEffect를 생성하고, dependency array에 props로 받을 data를 설정한다면
data를 새로 받을 때마다 특정 작업을 수행할 수 있습니다.
useEffect를 통해 5초 전 props와 5초 후 props를 감지하는 모습입니다.
import PropsComponent from "./PropsComponent";
import { useEffect, useState } from "react";
function App() {
const [data, setData] = useState("5초 전");
useEffect(() => {
setTimeout(() => {
setData("5초 후");
}, 5000);
}, []);
return (
<div>
{data === "5초 후" && <PropsComponent data={data}></PropsComponent>}
</div>
);
}
export default App;
만약 데이터를 받고 나서 자식 컴포넌트를 렌더링 하고 싶다면
data를 받았을 때 PropsCompoent를 보여줄수도 있습니다.
위 방법을 사용하면 5초 후에 PropsComponent가 페이지에 렌더링 되게 됩니다.
