조건부 렌더링
React의 조건부 렌더링은 자바스크립트에서 동작하는 것과 동일하게 동작한다. if 나 조건 연산자 같은 자바스크립트 연산자를 사용하여 현재 state를 나타내는 요소를 만들고 React가 UI를 업데이트하여 일치 시킨다.
mock데이터 접속시의 에러
코딩을 하다보니 mock 데이터에 접속하기 위해 선언을 했지만 이런 에러가 떴다.
이는 조건부 렌더링이 필요한 유형의 에러이다
해결법
{productInfo.productOption.map[0].name}
👇👇👇
{productInfo.productOption[0] && productInfo.productOption[0].name}&& 연산자를 사용하여, 조건이 true 일때만 특정 UI 를 렌더링 하고 false 일때는 아무것도 렌더링 하지 않도록 한다
