[React] useState의 초기값 내가 원하는 값으로 지정하기

문제점 

- 이전 글에서 말했듯이 또다른 복병이 생겨났다. 바로 초기화면에서 댓글이 아예 보이지 않는 것이다. 원인을 파악했더니 useState에 초기값을 아무것도 설정하지 않아서 발생한 것이었다.

 

내가 생각한 해결방안

- 그래서 이전에 댓글 불러오는 컴포넌트를 따로 만들었었는데 그 컴포넌트를 재활용해서 초기 댓글 불러오기 위한 용도로 사용했다.

const commentsInit = useAxios(`/api/comment/${userId}`); //이렇게 먼저 db에 저장된 초기 댓글을 가져와 commentInit에 담고
const [comments, setComments] = useState(commentsInit); //그 commentInit을 초기값으로 설정하자고 생각했다.

 

문제점 발생

- 하지만 내 초기 화면에는 아무것도 안뜨는 빈털털이 화면이었다. 

- 콘솔창으로 확인해보니 comments에는 아무값도 들어와 있지 않았다

- useState 초기값에 대해서 구글링을 하기 시작했다.

 

해결방안

- https://sezzled.tistory.com/entry/useState%EC%9D%98-%EC%B4%88%EA%B8%B0%EA%B0%92%EC%9D%84-%EB%82%B4%EA%B0%80-%EB%B0%9B%EC%95%84%EC%98%A8-props%EA%B0%92%EC%9C%BC%EB%A1%9C-%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0 이 사이트를 참고했다.

- useState의 초기값을 내가 받아온 props값으로 설정하는 방법에 대한 내용으로 useEffect을 사용해서 state의 값을 props값으로 변경시키는 방법을 취한다는 내용을 응용했다.

const commentsInit = useAxios(`/api/comment/${userId}`);
const [comments, setComments] = useState(commentsInit);

// 처음 방명록 방문 시, 이미 저장된 댓글 보여주는 기능
 	useEffect(() => {
        setComments(commentsInit);
    }, [commentsInit]);

 

에러 해결~!!!