TIL 20211116 [항해99 62일차]

프로필 수정 페이지에 console창 warning 제거

오류1. 수정 페이지에서 console창을 보면 "key" Warining이 발생

• 오류가 난 이유
  수정 페이지에서 map이 있는 부분에 key값을 안줘서 오류가 생긴 오류였다.

 <HashTagDiv>
            {hobby.length !== 0
              ? hobby.map((val) => {
                  {
                    console.log(val);
                  }
                  return (
                    <HashTag
                      type="button"
                      onClick={() => {
                        dispatch(deleteHobby(val));
                      }}
                      key={val}
                    >
                      {val}
                    </HashTag>
                  );
                 })
              : hobbyTag?.map((val) => {
                  {
                    console.log(val);
                  }
                  return (
                    <HashTag
                      type="button"
                      onClick={() => {
                        dispatch(deleteHobby(val));
                      }}
                      key={val}
                    >
                      {val}
                    </HashTag>
                  );
                })}
          </HashTagDiv>

• 해결 방안
  key 값을 넣어 해결했는데, key값 타입이 숫자로만 가능하다고 생각해서 처음에 idx값을 넣어줬는데 계속 같은 warining이 나와서 hobby에 id값은 저장이 안되있는데 어떻게 고유한 키값을 줘야하나 고민했었다. 그러다 key값 타입이 꼭 숫자가 아니여도 고유한 값이면 가능하다는걸 알게되서 바로 key={val}를 주었더니 해결됐다! (hobby에 저장되있는 값들이 고유값들이여서 고유id값이 없어도 가능했던일! 항상 map key값에 사용한 값들이 고유한 id값이라 타입이 숫자만 된다고 생각했다...😂)
  (P.S. key={val}로 주었는데도 해결이 안되서 왜 안되지 대체 뭐가 문제지 생각하다가... 삼항연산자라는게 생각나서 그 밑에 맵에도 key값을 넣어줬더니 해결😭 정말 이런부분 실수는 줄이자..😱)

프로필 수정 페이지 새로고침시 데이터 유지

오류2. 프로필 수정 페이지에서 새로고침이 되면 이전에 설정했던 데이터들이 사라짐

• 오류가 난 이유
  새로고침이 되면 리덕스나 state로 가져왔던 데이터들은 유지되지 않고 사라진다.

 const userInfo = useSelector((state) => state.cards.current);

 const [userName, setUserName] = React.useState(
    // JSON.parse() 메서드 -> JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성
    () => JSON.parse(localStorage.getItem('nick')) || userInfo.userName,
  );
  const [category, setCategory] = React.useState(
    () => JSON.parse(localStorage.getItem('category')) || userInfo.field,
  );
  
const addBtnClick = () => {
    ...<생략>...
    dispatch(editCardProfileDB(formData));
    localStorage.removeItem('nick');
    localStorage.removeItem('category');
  };  
  
React.useEffect(() => {
    // e.preventDefault();
    dispatch(loadMyCardDB());
    // JSON.stringify() 메서드 -> JavaScript 값이나 객체를 JSON 문자열로 변환 
    localStorage.setItem('nick', JSON.stringify(userName));
    localStorage.setItem('category', JSON.stringify(category));
  }, []);

• 오류 해결
  먼저 useEffect()를 사용해서 새로고침이 일어날때마다 loadMyCardDB()가 실행되서 userInfo에 값이 있게 했다. 그래서 이미지랑 태그들은 잘 가져왔지만 닉네임과 카테고리값은 못가져왔다. 닉네임과 카테고리는 useState에 변경된 값을 저장하고 있었기때문에 일단 localStorage 저장을 하고 꺼내오는 방식을 쓰기로 결정했다. 초기값 주는 부분에 localStorage.getItem으로 카테고리값을 객체로 만들어 저장하고, useEffect에서 localStorage.setItem으로 카테고리값을 문자열로 만들어 값을 가져왔다. 수정이 끝나고 다시 수정할때는 localStorage에 다른값이 저장되있어야하기 때문에 작성완료를 클릭시 기존에 저장했던 값은 localStorage.removeItem으로 제거한다.
  (P.S. 지금 이 방식으로 데이터유지가 되지만, 유저 닉네임을 localStorage에 저장하는 부분은 개인정보라 좀 신경쓰이기 때문에 다른 방식을 생각해봐야겠다...😢)