TIL. 34 React - 조건부 렌더링

💡 조건부 렌더링

• 조건부 렌더링 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 말한다.

• 작업 중, 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 /> ) })}

• React의 Lifecycle로 인해 발생한 문제였고, 실행 순서에 따라 데이터의 유무가 결정되고 여러 함수에서의 응용도 가능하다고 생각이 들어 React 아주 중요한 요소 중 하나가 아닐까 한다.