[react] Async/Await, 그리고 useEffect

상품에 대한 평을 올릴 수 있는 리뷰창을 구현해야 했다.

전체적인 흐름은,
기존에 작성 된 상품평들을 서버에서 불러오고 -> 리뷰평을 작성하고 -> 등록하기 버튼 클릭 -> 리뷰평을 서버로 보내고 -> 다시 업데이트 된 상품 평들을 불러오는 것이 이번의 미션!

HTML 쪽은 대략 가져온 상품평을 map() 함수로 뿌려주고 그 아래 댓글 작성 텍스트박스와 등록버튼

<div className='reviews'>
          {reviewList.map(review => {
            return (
              <React.Fragment key={review.id}>
                <div className="review">
                  <p className="reviewText" onChange={putRevText}>
                    {review.contents}
                  </p>
                </div>
                <div className="userInfo">
                  <div>{review.name}</div>
                  <div>{review.created_at}</div>
                </div>
              </React.Fragment>
            );
          })}

          <div className={isReviewExist ? 'reviewInput' : 'reviewInputHide'}>
            <textarea placeholder="내용을 입력하세요." onChange={putRevText}>
              {reviewText}
            </textarea>
            <div className='inputActivate'>

            <div className='reviewButtons'>
              <button className="registerInput" onClick={submitReview}>
                등록하기
              </button>
            </div>

그리고 react 쪽 함수에서 해당 미션에 필요한 부분은 다음과 같다

  const [isReturned, setIsReturned] = useState(false);
  const [reviewList, setReviewList] = useState([]);
  const [reviewText, setReviewText] = useState();
  
  const putRevText = e => {
    setReviewText(e.target.value);
  };

  const submitReview = async () => {
    await fetch('http://10.58.2.193:3000/product/1/review', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: token
      },
      body: JSON.stringify({ contents: reviewText }),
    });
    await setIsReturned(!isReturned);
  };

  useEffect(() => {
    fetch('http://10.58.2.193:3000/product/1/reviews', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(res => setReviewList(res.data));
  }, [isReturned]);

해당 코드 방법을 찾기 전에, submitReview 부분과 useEffect에 다음과 같은 코드를 작성하여 무한 로딩이 되는 서버가 터질만한 상황이 이루어졌다.

  const submitReview = () => {
    fetch('http://10.58.2.193:3000/product/1/review', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        Authorization: token
      },
      body: JSON.stringify({ contents: reviewText }),
    });
  };

  useEffect(() => {
    fetch('http://10.58.2.193:3000/product/1/reviews', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(res => setReviewList(res.data));
  }, [reviewList]);

위 코드의 문제점을 보자.

useEffect는 현재 의존성배열에 reviewList가 들어가 있다. 본래 의도는 reviewList가 새로운 상품평이 업데이트 될 때마다 다시 새로운 리스트를 불러 오는 것이였다. 하지만 아직도 확실하지 않은 이유료, 서버가 시작되자마자, 계속해서 useEffect가 실행이 되어, 서버에 무한루프로 fetch "GET" 을 가지고 오는 부분이 있었다.

잠깐만, 지금 보니깐 HTML 쪽의 className reviewText 쪽의 onChange 때문에 무한으로 상태를 변화시켜서 그런건가???????? 내일 확인해봐야겠다.

아 그리고, post로 fetch를 보낼 때 body는 콜론 바로 뒤에 중괄호가 필요 없었다. 이것 때문에 한동안 에러가 나서 고생했다.