👨‍💻 사건

• 팀프로젝트 중 게시물 작업을 하다, Uncaught TypeError: Cannot read property... 와 같은 에러가 계속 생성되었다. 어쩔때는 렌더링이 되고 어쩔때는 렌더링이 안되었다. 이를 곰곰히 생각해보다, 역시 렌더를 받는동안 기다리게 하여야겠다는 생각을 했다.

✅ 해결

useState를 통하여, 렌더링 될때와 안될때를 관리해주는 것을 만든다.

특히나, 서버와 통신하여 받아오는 값을 관리할때는 더더욱 유의하여 사용한다. 최대한 깊은 복사를 하여, 따로 관리를 하자.

//props 값은 상위 컴포넌트에서 요청받은 값을 받아온것이다.
const Post = ({ post }) => {
  const [data, setData] = useState('');
  const [dateData, setDateData] = useState({});
  const [imageFile, setImageFile] = useState([]);

	useEffect(() => {
		// props 인 post가 받아졌다면,
    if (post) {
      return setData({ ...post });
    }
  }, []);
	
  useEffect(() => {
		//data 값이 존재한다면,
    if (data) {
      setDateData(data.createdAt);
      setImageFile(data.image.split(','));
    }
  }, [data]);
	//이부분에서 상태관리를 하지않고 바로 적용하려니, 문제가 발생하였다.
  const year = new Date(dateData).getFullYear();
  const month = new Date(dateData).getMonth() + 1;
  const date = new Date(dateData).getDate();
}