[React][CRUD] 리액트로 간단한 게시판 페이지 만들어보기 - [Issue] React 는 Date() 를 rendering 하지 못한다. (Objects are not valid as a React child)

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial

 

 

 

 

 

date를 화면에 나타내 보려다 계속해서 만난 오류

 

Objects are not valid as a React child

 

 

찾아보니 new Date 이거나 Date의 값인 경우 Object라서 리액트에서 렌더링을 못한다는 것이다.

 

그래서 toString()을 해줘야 한다고 한다.

 

 

참고한 사이트:

 

stackoverflow.com/questions/41604539/objects-are-not-valid-as-a-react-child

Objects are not valid as a React child

 

 

 

 

 

 

 

현재 서버에는 날자가 이런형식으로 들어가 있고

 

 

 

 

 

 

 

 

이를 ArticleDetail 에서 props로 받아 이렇게 toString 해줘야 한다.

 

// ArticleDetail

          <tr>
            <th>날짜</th>
            <td>{new Date(props.date).toString()}</td>
          </tr>

 

 

 

 

 

 

화면에서 날짜를 드디어 볼 수 있다.

 

 

 

 

 

 

 

 

 

 

 

format를 바꾸고 싶다면 toString() 말고 다른 걸 써도 된다.

 

예를 들어 toLocaleString() 을 쓰면

 

 

 

          <tr>
            <th>날짜</th>
            <td>{new Date(props.date).toLocaleString()}</td>
          </tr>

 

 

 

 

 

 

이렇게 나타난다.

 

 

 

 

(화면에 나타난 Comment 는 무시하길 바란다)

 

 

 

 

 

 

 

목차 돌아가기: binaryjourney.tistory.com/pages/ReactCRUD-create-board-tutorial

[React][CRUD] create-board-tutorial