React - LifeCycle & 조건부 렌더링

김동현·2021년 4월 13일
0

react

목록 보기
2/4
post-thumbnail

LifeCycle

react 프로젝트시에 LifeCycle에 대해 알아둬야 원하는대로 원활한 개발이 가능할 것 같다.

LifeCycle 기본순서

  1. constructor
  2. render
  3. componentDidMount
  4. (fetch 완료)
  5. render
  6. (setState)
  7. componentDidUpdate(setState 되었기 때문에 컴포넌트 업데이트 발생)
  8. componentWillUnmount

부모자식간의 LifeCycle

컴포넌트에 자식이 있을 경우 LifeCycle은
부컨 - 부랜 - 자컨 - 자랜 - 자컴디마 - 부컴디마 - 붐모 fetch - 부모 rander - 자식 rander - 자식 컴디업 - 부모 컴디업 순이다.

조건부 렌더링 (&& 연산자)

개발을 하다보면 map을 돌렸을 때 값이 할당되기 전에 돌게되어 undefined 에러가 나는 경우가 있다.

이럴 경우

유효값 && map함수
이런식으로 유효값이 될 때만 map이 실행되도록 할 수가 있다.

참고로 배열, 객체와 같은 경우는 [], {} 와 같이 빈 배열, 객체일 경우에도 true 값이라고 하니 주의

빈 배열일 경우에는 map을 돌려도 에러없이 출력이 가능하다.

조건부 렌더링 사용 경우

  • 모달창 띄우게 해줄경우
  • 로그인이 되었을 때 팝업 띄우기 등
출처 
- https://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/
- 위코드 수업
profile
생산적인 삶을 살자

0개의 댓글