2021년 06월 27일 TIL

오늘의 개발 이슈는 리액트의 LifeCycle에 대한 기본적인 이해가 없어서 발생한 문제였다. 🚀 Lifecycle 기본 순서 constructor render componentDidMount (fetch 완료) render (setState) componentDidUpdate (setState 되었기 때문에 컴포넌트 업데이트 발생) 기본적으로 리액트의 라이프 사이클은 이러한 순서로 진행되는데, constructor render console.log(“render”) »> 문제 없음 console.log(this.state.data[0].name) »> 💥에러 발생 이것에 대한 이해 없이 빈 배열에 접근하려고 하니 이러한 문제가 발생했었다. 빈 배열의 0번째 index, 즉 this.state.data[0] 은 undefined이기 때문에 위와 같은 에러가 발생했다. 해결방식은
이렇게 조건부 연산자를 통해 조건부 렌더링을 구현하는 것으로 해결했다.