라이프 사이클

생애주기에서 원하는 동작을 실행시키기위한것

라이프 사이클 기본순서

Constructor => render => conponentDidMount => fetch완료 => setState, new props => render => componentDidUpdate(5번에서 setState 되었기 때문에 컴포넌트 업데이트 발생) => componentWillUnmount

---

부모자식 라이프 사이클

생성

부모 컨스트럭터 => 부모 렌더 => 자식 컨스트럭터 => 자식 렌더 => 자식 디드마운트 => 부모 디드마운트

생성될 때 (일회용)

• Constructor = 팥, 슈크림을 넣기전 붕어빵 찍는것 넌 팥, 넌 슈크림 (컴포넌트를 생성했을 때 state를 정해주는 과정)
• render = 컴포넌트를 그려지는 것
• conponentDidMount =그려지는 과정이 끝나고 실행시키고 싶은 것 (데이터 패치, 이벤트 리스너 같은동작을 여기서 함) 다 그려지고 완료된 시점이다 (딱 한번 그려짐)
• Constructor, render는 dom에 접근 ㄴㄴ 이유는 아직 화면에 그려지지 않아서 컨디마 전까지는 실제 화면에 없음

업데이트 할때 (다시 새 화면 그릴 때)

• props가 변했을때, setstate가 불렸을때(나 자신 state가 변했을때 ) render가 새로불림
• 다시 render 그래야 다시 그려진다
• setstate도 다시 불린다.
• componentDidUpdage 는 컨디마랑 기능은 같은데 처음 불리도 뭔가를 또 하려면 컨디업을 써야됨. Reder를 부를때마다 컨디업이 불림

제거할 때(정리)

• componentWillUnmount
  미리 할거 하고 사라지는 것

  컨디마에서 타이머를 걸어 놓았고 끝났으면 사라짐 근데 윌언마운트가 없으면 안사지고 있음

• 조건부 렌더링
  &&는 앞에 조건이 유효할때 뒤에걸 렌더하겠다 뜻