22. 04. 07 Map 역순 및 새로고침

프로젝트를 하는 와중에 첫 번째 난관으로 댓글이 최신이 제일 밑으로 오는 상황을 맞이하여 코드를 수정하였다.

slice를 사용해 얕은 복사를 하여 원본을 안 바꾸고 복사하여 역순으로 적용하여 넣는 방법.!

const sample = ['one', 'two', 'three'];
const result = sample.slice(0).reverse().map(num => num);
console.log(result);
// output: Array ["three", "two", "one"]

console.log(sample);
// output: Array ['one', 'two', 'three']

  const result = review
    .slice(0)
    .reverse()
    .map((num) => num); //기존 것 뒤집는 것

  return (
    <div>
      <MyPageMenu />

      {result.map(
        (
          el: {
            reviewId: number;
            restaurantId: number;
            name: string;
            rating: number;
            comment: string;
          },
          key
        ) => (
          <MyReviewList reviewList={el} key={key} />
        )
      )}
    </div>

첫 번째 것은 쉽게 해결을 하였으나, 두 번째로 댓글을 넣었는데 바로 적용이 안 되고 새로고침을 꼭 해야 화면에 적용이 되어 보이는 것이었다.
그래서 나름 혼자 심각하게 생각을 하다보니..... 리랜더링이 안 되는 문제..

이걸 이렇게 심각하게 고민을 하다니..

이걸 하면서 깨달은 점.

navigate로 이동을 하면 새로고침이 안 된다.
Link to 또한 새로고침이 안 된다.

그래서 리랜더링의 조건을 찾아보았다.

1. 자신의 상태가 변경될 때
2. 부모 컴포넌트가 리렌더링 될 때
3. 자신이 전달받은 props가 변경될 때
4. forceUpdate 함수가 실행될 때

그래서 이 조건을 맞춰서 리랜더링을 시키려고 하다가.. 굳이 쓸데없이 state를 사용하여 상태를 변화시키기 보다는 단순하게 사용하기로 하였다.
그것이 바로
window.location.reload()

이걸 사용하여 코드 적용!

const changePassword = () => {
    //비밀번호 유효성 검사 통과 확인
    if (!passwordValid || !newPasswordValid) return;
    axios //비밀번호 변경 시 서버에 요청
      .patch(
        `${process.env.REACT_APP_API_URL}/user`,
        {
          oldPassword: passwordInfo.oldPassword,
          newPassword: passwordInfo.newPassword,
        },
        {
          headers: {
            authorization: `Bearer ${localStorageTokenCheck}`,
          },
        }
      )
      .then(() => {
        alert("비밀번호 변경이 성공하였습니다.");
      })
      .then(() => window.location.reload())  //요기!
      .then(() => {
        navigate("/");
      })
      .catch(() => {
        alert("기존 비밀번호가 일치하지 않습니다.");
      });
  };

프로젝트가 며칠 안 남았다.

일단 우리가 생각한 베어미니엄은 완료하였으나, 어드번스드는 잘 못 한 것이 현실.!!

며칠 남은 시간 동안 시간 잘 써서 완료하자!!