라디오 버튼
오류1. 라디오 버튼 체크가 변경되지 않음
-
오류가 난 이유
e.target.value는 input태그에 입력되는 값을 의미, value를 변경하는 것으로 접근한게 잘못된것 같다. 결론적으로 e.target.value가 적용되지 않아 checked 값이 변하지 않았다. -
해결방안
// Before 코드(오류가 있던 코드)
const handleRadioChange = (e) => {
e.target.checked;
setCategory(e.target.value);
console.log(e.target.value);
};
...생략...
<RadioWrap>
<RadioInput
type="radio"
id="categoryId"
name="field"
value="0"
checked={category === 0 ? true : false}
onChange={handleRadioChange}
style={{ marginRight: '16px' }}
/>
<InputLabel htmlFor="category">백엔드 개발자</InputLabel>
</RadioWrap>// After 코드(오류 수정 코드)
<RadioWrap>
<RadioInput
type="radio"
id="categoryId"
name="field"
value="0"
checked={category === 0 ? true : false}
onChange={() => setCategory(0)}
/>
<InputLabel htmlFor="category">백엔드 개발자</InputLabel>
</RadioWrap>handleRadioChange로 따로 뺀 함수는 삭제하고, 라디오 인풋에 onChange 함수를 바로 주는걸로 변경했다. 근데 여기서도 바로 오류가 해결 안됐던게 onChange={() => setCategory("0")}으로 되있었는데 0이 문자열이 아니기 때문에 ""가 빠졌어야 했다.😭
오류2. 이전에 지정했던 라디오 체크 값이 따라오지 않음
- 오류가 난 이유
카테고리 state에서 초기값을 무조건 '0'을 줬었는데 체크했던 값은 서버에서 받아서 저장한 리덕스에서 가져와야 하기 때문에 체크 값이 따라오지 않고 계속 0인 백엔드에 체크가 되있었다. - 해결방안
// Before 코드(오류가 있던 코드)
const userInfo = useSelector((state) => state.cards.current);
const [category, setCategory] = React.useState('0');// After 코드(오류 수정 코드)
const userInfo = useSelector((state) => state.cards.current);
const [category, setCategory] = React.useState(
// () => JSON.parse(localStorage.getItem('category')) ||
userInfo.field
);체크했던 값을 저장해둔 리덕스에서 카테고리 값을 받아와서 초기값으로 설정해 주었다.
그리고 원래는 새로고침하면 기존 값들이 그대로 보이게끔 하려고했다. 새로고침하면 리덕스로 가져온 값들이 날라가서 localStorage에 저장해서 값을 가져오는 방법을 생각했다. 그래서 새로고침 됐을때 localStorage에서 값을 가져오도록 '() => JSON.parse(localStorage.getItem('category'))' 했었지만, 나중에 새로고침시 마이페지로 돌아가게끔 변경해서 주석처리 했다.
거의 다 해결했었는데 checked={category === 0 ? true : false}, onChange={() => setCategory(0)}이부분에서 "true": "false", "0" 이걸 같이 큰따옴표를 제거했다면 삽질을 더 빨리 끝냈을 건데...😂 "0"에서 큰따옴표를 없애고 "true": "false"에 큰따옴표를 넣어주고, 바꿔서도 해봤는데... 동시에 진작 뺄걸... 아무튼 이또한 좋은 경험이 됐다!!
그리고 해쉬태그를 string 값으로 서버에 보낼때 오류 발생. 문제는 검색을 서버 디비에 있는 내용으로 하기로 했는데 우리가 적은 검색값들이 서버디비에 없어서 request가 빈값으로 보내졌던것이다. 그래서 맞추니까 해결됐다.
마지막으로 stack + ',' + hobby 이렇게 보내도 된다. hobby가 배열이라고 stack[0] + ',' + hobby[0]이런식으로 할 필요는 없다!(어차피 hobby에 나열된 모든 값이 필요하기때문!)
아무튼 문제들을 해결해서 뿌듯! 😀
