리액트(React)에서의 데이터 가져오기(data fetching) 변천사
리액트(React)에서 최근 새로운 데이터 페칭(data fetching) 훅(hook)을 소개했는데요.
이 훅(hook)을 살펴보기 전에 예전에는 어떤 방식을 썼는지, 그리고 버전 업이 되면서 어떻게 변했는지 살펴보겠습니다.
데이터 가져오기에서 훅(hook)의 도입으로 좀 더 간결해졌는데요.
useState, useEffect을 사용하는 방식이 지금도 계속 이어져 오고 있습니다.
가장 일반적이고 고전적인 방식이라고도 할 수 있는 예제를 한번 볼까요?
React 16+ 버전의 경우입니다.
const Post = () => {
const [post, setPost] = useState(null);
const [loading, setLoading] = useState(true);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => {
setPost(res.data);
setLoading(false);
})
.catch((err) => {
console.log(err);
setLoading(false);
});
}, []);
return (
<div>
{loading ? (
<div>Loading...</div>
) : (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
)}
</div>
);
};
// Parent component
<Post />
예제를 보시면 useState와 useEffect을 이용한 가장 일반적인 데이터 가져오기 예제입니다.
Loading 상태를 직접 체크하고 제어해 주는 코드도 들어있네요.
그런데 요즘은 이렇게 안 하죠?
React 18 버전에서는 다음과 같이 Suspense를 이용하는 방식으로 바뀌었습니다.
const Post = () => {
const [post, setPost] = useState(null);
useEffect(() => {
axios
.get('https://jsonplaceholder.typicode.com/posts/1')
.then((res) => {
setPost(res.data);
})
.catch((err) => {
console.log(err);
});
}, []);
return (
<div>
<h1>{post.title}</h1>
<p>{post.body}</p>
</div>
);
};
// Parent component
<Suspense fallback="Loading...">
<Post />
</Suspense>
뭔가 훨씬 더 간결해졌네요.
그래도 여전히 useEffect 훅은 사용해야 하네요.
그래서 최근 React 팀에서 개발 중인 새로운 훅인 'use' 훅을 보면 완전히 새로운 방식입니다.
'use' 훅을 이용한 방법을 한번 볼까요?
const Post = () => {
const { data } = use(axios.get('https://jsonplaceholder.typicode.com/posts/1'));
return (
<div>
<h1>{data.title}</h1>
<p>{data.body}</p>
</div>
);
};
// Parent component
<ErrorBoundary fallback="Error">
<Suspense fallback="Loading...">
<Post hasError />
</Suspense>
</ErrorBoundary>
React 18의 Error 바운더리까지 사용하는 수준으로 올라왔습니다.
'use' 훅을 사용하는 것만으로도 useState 훅과 useEffect 훅을 사용하지도 않고 데이터 가져오기가 되는데요.
정말 신세계네요.
하지만 아직 'use' 훅은 개발 단계여서 사용하기는 좀 그렇다고 하네요.
좀 더 안정판이 나올 때까지 기다려 볼 수밖에 없네요.
그럼.