🍒 Lifecycle의 기본순서

---

• constructor
• render
• componentDidmount
• fetch완료
• render (setstate)
• componentDidupdate

아래코드로 state와 setstate를 확인해보자!

여기서 fetch는

 { 
  "data": [{index : 1, name : "yeonju" }]
 }

여기서 console로 확인해보면 이렇게 찍힌다!

• "나는 constructor"
• "나는 render"
• "나 state" [setstate 전이라 빈 배열이나온다]
• "나는 didmount" (fetch)
• "fetch 완료!"
• (render) "나 state" [data: [{index:1, name: yeonju}] ] ; fetch후 배열이 state로 들어갔다
• "나 DidUpdate"

🌈 render 안에서 this.state.data[0] 로 접근해보기

---

첫번째 render가 실행될 때 아직 setstate가 되지 않았기 때문에 undefined가 뜬다 하지만 오류가 발생하지는 않는다

• "나는 constructor"
• "나는 render"
• "나 data배열" [undefined]
• "나는 didmount" (fetch)
• "fetch 완료!"
• (render) "나 state" [data: [{index:1, name: yeonju}] ] ; fetch후 배열이 state로 들어갔다
• "나 DidUpdate"

🌈 render 안에서 this.state.data[0].name 로 접근해보기

---

🚫 바로 에러가 뜨는데 이유는 render될 때 빈 배열인데 키값을 가질 수 없기 때문에 아래와 같은 에러가 발생한다!

어떻게 해결해야할까🤔?

🌈 AND 연산자 (&&)를 사용한 조건부 렌더링하기

---

• 조건부렌더링은 특정 조건이 만족될 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야하는 상황에서 구현할 수 있다

🍒 부모-자식 데이터 전달시 발생하는 오류

---

• 부모가 API에서 받은 데이터를 자식에게 props 값으로 전달하여 자식 내부에서 그 데이터를 접근해 사용하는 경우이다

🌈 부모 components

🌈 자식 components

콘솔창을 확인해보자

---

진행하고 있는 프로젝트로 동작할때마다 console.log을 확인해보니 처음 사이트를

들어가면 전부 동작했다 여기서 다른 동작이 일어난다면 lifetcycle이 부분

실행되었다. componentDidupdate에 조건을 걸어주고 ture라면 setstate가 일어나고

render가 됐을때 변경된 state값이 나오고 다시 componentDIdupdate가 실행되었다!

render(변경전state값)->componentDidupdate->render(변경된state값)->componentUpdate```