Api 응답 데이터를 React 상태로 관리해야 하는 이유

 

안녕하세요 ..ㅎㅎ

정말정말 오랜만에 블로그를 쓰러 왔습니다.

그동안 무엇을 했길래 안썼냐하면,,,

딱히 크게 뭐 없었습니다!!

 

사실은

미니 프로젝트와 리액트를 새로 배우면서 블로그를 매일 쓸 에너지가 남아돌지 않더라고요.

그럼에도 꾸준히 블로그 쓰신 다른 수강생 분들,, 존경합니다 bb

 

 

---

오늘은 무슨 주제로 돌아왔냐면요, Api 응답 데이터를 React 상태로 관리해야 하는 이유입니다.

 

 

TMDB를 사용한 영화 리스트를 만들고 있었는데

api 응답 데이터를 바로 가져와서 쓰는 게 아니라 상태로 관리를 해야 하는 이유를 크게 궁금해하지 않고

코딩을 했었는데요, 이 주제를 블로그에 써놓으면 좋을 거 같다고 생각했습니다.

 

 

---

1.  UI 업데이트를 위한 상태 반영

• React에서는 상태가 변경될 때마다 컴포넌트가 다시 렌더링됩니다. API 응답 데이터를 상태로 관리하면, API로부터 데이터를 받아온 후 자동으로 UI가 업데이트됩니다. 이를 통해 사용자는 최신 데이터를 기반으로 한 화면을 볼 수 있게 됩니다.

2.  데이터의 비동기 처리

• API 요청은 네트워크를 통해 비동기적으로 이루어집니다. 이 과정에서 데이터를 받기 전과 받은 후의 상태를 구분하여 관리할 필요가 있습니다. 예를 들어, 데이터를 요청하는 동안 로딩 상태를 보여주고, 데이터를 받아온 후에는 해당 데이터를 UI에 표시하는 방식으로 상태를 관리합니다.

3.  상태에 따른 조건부 렌더링

• React 상태를 사용하여 조건부 렌더링을 쉽게 구현할 수 있습니다. 예를 들어, API 요청이 성공했을 때는 데이터를 표시하고, 요청이 실패했을 때는 오류 메시지를 표시하는 등, API 응답에 따라 다양한 UI 상태를 구현할 수 있습니다.

4.  사용자 경험 향상

• API 응답을 상태로 관리하면 데이터가 변경되었을 때 사용자가 이를 즉시 인지할 수 있어 더 나은 사용자 경험을 제공합니다. 예를 들어, 사용자가 검색어를 입력할 때마다 새로운 데이터를 받아와 상태를 업데이트하면, 검색 결과가 실시간으로 반영됩니다.

5.  상태의 공유와 관리

• 특정 API 데이터를 여러 컴포넌트에서 사용해야 할 경우, 상태로 관리하면 필요한 컴포넌트에 쉽게 전달할 수 있습니다. 또한, 상태 관리 라이브러리(Redux, Context API 등)를 사용하여 전역적으로 상태를 관리하면, 데이터의 흐름과 공유가 훨씬 쉬워집니다.

 

 

 

---

 

 

 

이렇게 간단하게 이유를 적어봤습니다.

확실히 글로 정리하면서 적으니 한 번 더 공부가 되네요 :>

 

매일 블로그 쓰러 오겠다고는 말은 터무니 없는 약속이기에,,,

이렇게 꼭 적어야 하는 내용은 적으러 오겠습니다!!

😉🍀🤍