패스트캠퍼스 챌린지 6일차 - 리액트 상태 끌어올리기, 데이터 fetch하기

See the Pen state lifting by BEGINNERWW (@beginnerww) on CodePen.

 

State 끌어올리기

 

형제컴포넌트가 존재하고 어떠한 액션을 취할때 형제컴포넌트의 state(값, 데이터 등)이 필요할 때,

해당 상태값을 각각의 컴포넌트 내에서 관리하는 것이 아닌 부모컴포넌트로 lifting up 하여 관리하는 것을 말한다.

단순한 구조(연관된 컴포넌트가 몇 되지 않을때)일 경우 lifting up(상태를 부모가 관리), Props drilling(props를 자식 컴포넌트로 하달)을 함에 있어 큰 문제가 되지 않으나,

과도할 경우 어디서 전달되어온 값인지 추적하기가 어려워져 유지보수에 문제가 생긴다.

이를 보완하기 위해 Context Api나 상태관리 라이브러리(redux, mobx 등)을 사용할 수 있다.

---

See the Pen data fetch by BEGINNERWW (@beginnerww) on CodePen.

데이터 Fetch 해보기

 

api를 통해 데이터를 가져올 경우 기본적으로 제공되는 web API 중 fetch api를 사용해보았다.

(기본적으로 제공되는 fetch 외에 ajax나 axios 등으로 네트워크 통신이 가능하다.)

 

상황별 핸들링

 

1. 로딩 - 마운트되고 데이터는 아직 받지 못한 상태

2. 데이터 - 정상적으로 통신 완료되어 데이터를 리턴받은 상태

3. 에러 - 네트워크 통신 중 서버 혹은 클라이언트에서 문제 발생으로 인해 데이터를 제대로 얻지 못한 상태

 

- 리액트를 공부하면서 fetch 나 axios는 promise 구조로 이루어져있다(?!)

promise는 자바스크립트 비동기 처리에 사용되는 객체로 주로 데이터를 받아와 화면에 표시할 때 사용한다.

강의 중 편집되어 설명없이 툭 튀어나온 코드

 

** 강의 중 fetch로 데이터를 가져와 state에 담기 전에는 정상적으로 작동했었는데

state에 담은 뒤 왼쪽 이미지와 같이 화면이 렌더링되지 않았다.

처음엔 코드펜에서 react와 react-dom import 하는 과정에서 버전이 달랐나싶어 재확인하고,

코드샌드박스, repl.it 까지 확인을 했는데 똑같이 에러도 확인되지 않은채 렌더링이 안되길래

강의에서 놓친 부분이 있나싶어 돌려봤는데 아무설명없이 갑자기 코드가 추가되었더라

(타이핑하는 부분도 편집되어있었다 갑자기 툭튀어나온 코드)

 

if 문을 추가하니 정상적으로 작동이 되는데 왜 그런지 이유를 찾아볼수 없어 질의를 남기려 했으나

초창기에는 그래도 메일로 질의를 받았던거 같은데 지금은 무슨 이유에서인지 질의응답을 제공하지 않는다고한다.

인프런과 패스트캠퍼스 둘다 이용해본 입장으로 인프런에서 제공하는 질의응답 서비스는 벤치마킹할 필요가 있다고 생각한다.

해당 클립을 공부하면서 먼저 질문되었던 내용과 답변을 보며 공부되는 부분도 있었고,

나도 동일한 의문을 가진 적이 꽤 있었기에 너무 만족했던 서비스였기 때문이다.

 

결론은 질의응답 서비스 제공해주세요 패캠

 

 

https://bit.ly/3FVdhDa

수강료 100% 환급 챌린지 | 패스트캠퍼스

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

 

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #한번에끝내는React의모든것초격차패키지Online.

---

같이 읽으면 좋은 글  👇👇👇 

공식문서 state 끌어올리기

자바스크립트 Promise 쉽게 이해하기