조건부 렌더링과 React Life Cycle

태현·2021년 5월 10일
0

조건부 렌더링:

React에서 조건부 렌더링은 JavaScript에서의 조건 처리와 같이 동작한다. if 나 조건부 연산자 와 같은 JavaScript 연산자를 현재 상태를 나타내는 엘리먼트를 만드는 데에 하는데, 현 상태에 맞게 UI를 업데이트한다.

쓰임:

  • console.log("render") >>> 문제 없음
  • console.log(this.state.data[0].name) >>> 💥에러 발생
  • 빈 배열인데 어떻게 name이라는 키 값을 가질 수 있을까?
  • 빈 배열의 0번째 index, 즉 this.state.data[0] 은 undefined이기 때문에 위와 같은 에러가 발생하게 된다.

⛑ 해결방법

조건부 렌더링

  1. 삼항연산자

2. 엔드연산자


profile
안녕하세요, 지식을 공유하는 공간입니다.

0개의 댓글