📌 개발 공부 1개월 차인 to-be 개발자의 자습 블로그🙂ﾠAug 30 ~ Sep 3, 2021
현재 상태
https://yeri-kim.github.io/posts/react-liefcycle/
https://vimeo.com/595821106
lifecycle : 컴포넌트의 생애주기
state, props, lifecycle이 react의 기본이자 중요한 점
학습 목표
1. lifecycle의 각 단계를 이해
2. 부모 자식 component 관계에서 lifecycle의 호출 순서 이해
3. 데이터 호출 과정에서 발생하는 cannot read property of undefined error 설명, 이해
4. 위 에러를 조건부 rendering을 활용해 해결
5. Javascript 각 데이터 타입의 truthyfalsy 판단
component의 생성, 업데이트, 제거가 lifestyle
react가 만든 lifecycle method가 정해져있는데
- 생성될 때 constructor, render, componentDidMount
- 업데이트될 때 render, componentDidUpdate
- 제거될 때 componentWillUnmount
lifecycle method가 필요한 이유는 특정 시점에 우리가 원하는 동작을 시행시키기 위해서
ex componentDidMount될 때 백엔드 데이터를 가져온다
rerender되는 경우는 props가 변경되거나 setState로 state가 변경될 때
parent constructor, child render, child constructor, child render
구전 설명
fetch로 데이터를 가져왔고, state를 setState 담아줌 (state가 갱신된 것)
setState는 다음에 render를 호출함 (render는 필수!)
componentDidMount는 한 번 불림 (내가 부른 게 잘 붙었다!) (mount : 그리다.)
render 끝난 다음인 두 번째 render 때는(이 update는 = 결과물 = mount에) 그 때마다 componentDidUpdate를 씀
component를 다 쓴 다음엔 (component는 할 일을 다 했어) componentWillUnmount (없어지려고 할 때 처리하는 동작. cleanup)
(eventListener같은 거 써줌)
순서를 기억해
Date Laoding : 데이터를 내가 쓰고 싶기 때문에 가져오는 행위 w. componentDidMount() : 데이터 로딩을 처리하기에 최적의 장소
Fetch : 일종의 요청
[] 빈 배열이었다가 componentDidMount() {~ 풀리고, fetch(~ 풀리고, setState가 업데이트 되면 state가 변경돼서 업데이트된 배열이 들어옴
공식 문서
https://ko.reactjs.org/docs/state-and-lifecycle.html#adding-lifecycle-methods-to-a-class
