Section2 Unit9 [React] 클라이언트 Ajax 요청

---

Section2 Unit9 [React] 클라이언트 Ajax 요청

 

📌 Chapter1. React 데이터 흐름

• 단방향 데이터 흐름이라는 원칙에 따라 하위 컴포넌트는 상위 컴포넌트로부터 전달받은 데이터의 형태 혹은 타입이 무엇인지만 알 수 있다. 데이터가 state로부터 왔는지, 하드코딩으로 입력한 내용인지는 알지 못한다. 그래서 하위 컴포넌트에서의 어떤 이벤트로 인해 상위 컴포넌트의 상태가 바뀌는 것은 마치 “역방향 데이터 흐름”과 같이 조금 이상하게 들릴 수 있다.

 React가 제시하는 해결책은 다음과 같다.

 → 상위 컴포넌트의 “상태를 변경하는 함수” 그 자체를 하위 컴포넌트로 전달하고, 이 함수를 하위 컴포넌트가 실행한다.

이를 “상태 끌어올리기(Lifting State Up)”라고 한다.

 

 상태 끌어올리기에 대한 내용은 React의 state글에 위와 같이 정리해두었고,

 React의 데이터 흐름에 대해서도 공식문서를 보며 정리해보았다.

React의 데이터 흐름 - React로 UI를 구현하기 위한 단계

 

 

📌 Chapter2. Effect Hook

 Side Effect와 순수함수에 대한 간략한 언급과 함께 Effect Hook인 useEffect가 무엇인지와 관련 예제도 정리해보았다. 

React Hooks - useEffect

 

Side Effect와 순수함수와 관련된 재밌는 퀴즈가 있어서 기록📝 

 

❓ Math.random()은 순수 함수가 아닙니다. 왜일까요?

    → Math.random() 같은 메서드는 동일한 입력에도 다른 출력이 나올 수 있으므로 순수 함수가 아니다.

❓ 어떤 함수가 fetch API를 이용해 AJAX 요청을 한다고 가정해 봅시다. 이 함수는 순수 함수가 아닙니다. 왜일까요?

    → 어떤 함수가 서버에 네트워크 요청을 보낸다면 이로 인해 서버의 데이터에 Side Effect를 일으킬 수 있고, 이에 따라 해당 함수는 순수 함수가 아니다.

 

---

🌙  오늘의 회고

 오늘 과제였던 States Airline part 1을 해결하고, 스터디 이벤트 주제였던 Movie App도 해보려고 했는데, clone을 하고 npm install으로 dependencies를 받고, 앱을 실행하려는데 계속 에러가 났다. 화면에 나오지도 않고, 에러메시지만 잔뜩 출력되길래 엄청 애먹었다…

결국 구글링 두시간으로 뭘 했는지 모르는 임시 해결을 해서 이제 실행은 되는데, 무엇이 문제인지 전혀 모르겠다. 결론적으로 react-scripts 버전을 업그레이드하니 해결이 되었는데, 음… 휴. 담에 또 이런 문제가 생겨도 똑같이 구글링 하고 있을듯 하다…

 그래도 일단 화면은 나오게 했으니, Movie App도 한번 만들어봐야지.

 결국 오늘 Movie App 리뷰도 하고, States Airline part 2 까지 완료하였다 😊 낮엔 내내 집중이 안되더니 저녁되니까 살아난거.. 될일이냐구,, 😭