Cannot read properties of undefined (reading 'map')

    <ReviewBox>
      {reviewList.map(function (a, i) {
        return (
          <>
            <div>{reviewList[i].dateTime}</div>
            <div>{reviewList[i].writer}</div>
            <div>
              {reviewList[i].content.length > textLimit ? (
                <>
                  <Modal isTrue={isTrue} index={i} />
                  <button
                    onClick={() => {
                      setIsTrue(true);
                    }}

                    더보기
                  </button>
                </>
              ) : (
                reviewList[i].content
              )}
            </div>
            <Rectangle />
          </>
        );
      })}
    </ReviewBox>

오늘의 에러 API를 통해 받아온 데이터를 map을 통해서 전달해주다보니 
```

Cannot read properties of undefined (reading 'map')

이런 에러를 보게되었습니다.

제대로 API를 통해 데이터를 가져온것 같은데 이런 에러가 발생한 이유는 무엇일까???
Console.log를 통해 받아온 데이터를 출력해보니 데이터는 잘나오는것을 확인할 수 있었다.

그렇다면 무엇이 문제일까???
구글검색을 통해 알아보니
리액트는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다고 한다.
리액트가 데이터를 받아오기전에 이미 "reviewList.map(function (a, i)" map을 통한 반복문을 통해 렌더링이 시작되고
이로 인해 데이터가 출력되지 않고 undefined로 정의되어 에러가 발생한 것이라고 합니다.


문제해결방법

문제를 파악했으면 어떻게 처리할 것인가?
어떻게 해결할것인가????

&&을 이용하면 해결할 수 있습니다.


자바스크립트에서 true && expression은 항상 expression으로 실행되고 false && expression은 항상 false로 실행된다. 
따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 
거짓이면 React는 무시하고 건너뛴다. 
출처: https://devbirdfeet.tistory.com/47 [새발개발자:티스토리]
    
    
    ```
        <ReviewBox>
          {reviewList &&
            reviewList.map(function (a, i) {
              return (
                <>
                  <div>{reviewList[i].dateTime}</div>
                  <div>{reviewList[i].writer}</div>
                  <div>
                    {reviewList[i].content.length > textLimit ? (
                      <>
                        <Modal isTrue={isTrue} index={i} />
                        <button
                          onClick={() => {
                            setIsTrue(true);
                          }}
                        >
                          더보기
                        </button>
                      </>
                    ) : (
                      reviewList[i].content
                    )}
                  </div>
                  <Rectangle />
                </>
              );
            })}
        </ReviewBox>

이렇게 {reviewList &&을 추가해주었더니 에러가 사라지는 것을 확인할 수 있었습니다.
끝!!!!!!!!