[오류해결] TypeError: Cannot read property 'map' of undefined

1. 문제점

• React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.
• 즉, React는 return에서 XXX.map(...)을 반복실행할 때, 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 나는 것이다.

2. 문제해결

&&을 활용하자!

• { true && expression } 은 항상 expression
• { false && expression }은 항상 false

조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다.
거짓이면 React는 무시하고 건너뛴다.

  return(
    <div>
      <h1>타이틀<h1>
      <div className="news">
        // && 활용!
        {xxx && xxx.map(item => {
          return <p><a href={item.link}> {item.title} </a></p>;
        })}
      </div>
    </div>
  );