조건부 렌더링
조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 말한다.
작업 중, map()을 사용해 state 값을 자식 컴포넌트로 보내려고 할 때, 없는 값을 map()을 하고 있다는 에러 메시지를 종종 본다. 이는 조건부 렌더링을 통해 간단히 해결할 수 있다.
에러가 났던 기존 코드(찾을 수 없는 데이터를 map()하고 있다.)
this.state = { data: [] } (스테이트 지정) {this.state.data.map(all => { return <Component> })}
조건부 렌더링을 활용해 에러가 나지 않게 처리
this.state = { data: [] } (스테이트 지정) {this.state.data && this.state.data.map(all => { return ( <Component /> ) })}