210212_TIL

🍎 오늘 한 일

---

✔️ React - Lifecycle 이해
페이지가 렌더링되기 전부터 사라질 때까지 컴포넌트는 수명주기라는 것을 갖는다. 모든 컴포넌트는 마운트, 업데이트, 언마운트 세 가지 단계를 거치는데 각 단계별로 몇개의 메서드들이 정해진 순서대로 호출된다. 이렇게 호출되는 메서드들을 lifecycle 메서드라고 한다. 마운트 단계는 DOM 생성 이후 웹 브라우저상에 나타나는 단계이고, 업데이트는 마운트 이후 컴포넌트의 props, state등 변경사항이 생겼을 때를 말한다. 언마운트는 컴포넌트가 DOM에서 제거되는 시기로 말 그대로 컴포넌트 소멸시기라고 할 수 있다. 컴포넌트를 하나 만들고 각 메서드들이 실행되는 시기와 내용을 콘솔창을 통해 눈으로 확인해보니까 좀 더 이해가됐다. 첫 렌더링을 마친 후 실행되는 componentDidMount 메서드를 이용해서 모든 데이터를 받아온 후 페이지가 로딩될수있도록 setTimeout함수를 써서 비동기 처리를 해보기도 했다. 아직 모든 메서드를 활용해보진 않아서 잘 와닿지 않는 것들도 있는데, 다른 메서드들은 어떻게 쓰이는지에 대해서도 좀더 알아봐야겠다.

✔️ React - 영화 정보앱 만들기
리액트에 익숙해지기 위해 영화앱을 만들어 보았다. 현재 상위랭킹 영화 20개의 제목, 포스터, 줄거리 등의 정보를 제공하는 앱인데, 영화에 대한 정보는 API를 통해 받아왔다. 이번에는 fetch 대신 axios를 통해 받아와봤다. 라우팅은 react-router-dom 패키지를 이용했는데, 그중에서도 HashRouter, Route, Link 세가지를 써봤다. Link는 a태그처럼 사용하는 태그인데 to 속성에 링크를 설정하면 그곳으로 이동시킬 수 있었다. 그래도 역시나 리액트에서 가장 중요한건 props와 state를 잘 이해하고 활용하는것 같다는 생각이 들었다.

 

🍎 기억할 것

---

✔️axios vs fetch
1. axios
- 구형 브라우저 지원
- 응답시간 초과를 설정 가능
- JSON 자동변환 가능
- node.js에서 사용 가능
- request aborting (요청취소)가 가능
- 에러가 catch되었을 때, .then 대신 console창에 에러 로그 보여줌

2. fetch
- Javscript 내장 라이브러리 (import 필요X)
- 업데이트에 따른 에러 방지가 가능
- 네트워크 에러 발생시 기다려야함 (reponse timeout API 제공X)
- 지원하지 않는 브라우저 존재

✔️ React Lifecycle method
1. 마운트 (mount)
- constructor()
- getDerivedStateFromProps()
- render()
- componentDidMount()

2. 업데이트 (update)
- getDerivedStateFromProps()
- shouldComponentUpdate render()
- getSnapshotBeforeUpdate componentDidUpdate()

3. 언마운트 (unmount)
- componentWillUnmount()

✔️ 구조분해할당 응용

const {
  prop: {
    data: { items }
  }
} = fulldata

 

🍎 더 공부할 것

---

✔️ lifecycle method 활용
✔️ react-router-dom
✔️ Hooks