1.
[ Error message ]
Warning: You provided a `checked` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultChecked`. Otherwise, set either `onChange` or `readOnly`.
[ Why? ]
리액트에서 체크박스를 사용할때 주의 할 점은 checked 속성과 onClick핸들러를 동시에 사용할 수 없다는 것이다.
체크박스에서 체크를 했다 풀었다 하는것은 onChange로 핸들링 해야하는데 , 나는 onClick으로 checked를 핸들링 하려 했기 때문에
위같은 에러가 났다.
[ Solve ]
따라서 위같은 에러를 해결하려면 총 세가지 방법이 있다
1. onClick 대신에 onChange핸들러를 사용
2. checked 속성 대신에 defaultChecked 속성 사용 - 이 경우, value값에 어떤 이벤트가 발생했을 때, value가 표면적으로 변한다고 해도 실제 상태값이 바뀌지는 않는다.
3. readOnly 속성 추가해주기
2.
[Error message]
validateDOMNesting(...): <td> cannot appear as a child of <a>
[ Why? ]
<table> 태그를 이용해서 공지사항 목록을 테이블 형태로 보여주는 컴포넌트에서 위같은 에러가 발생했다.
'td 태그는 a 태그의 하위로 들어올 수 없다.' 그래서 테이블 쪽 코드를 봤더니 , a 태그를 쓴 적이 없었다.
천천히 살펴보니 테이블 내에서 사용한 태그는 <Link> 뿐이었다. 리액트 에서는 페이지 이동을 할 때 a 를 사용하지 않고 Link를 이용하기 때문에 같은 것으로 인식 된 것 같았다.
[ Solve ]
공지사항 목록중 옆의 [상세] 버튼을 누르면 해당하는 공지사항의 상세정보 페이지로 이동한다. 그래서 td 태그를 Link 태그로 감싸주는 형식이었다.
간단하게
<Link> <td></td> </Link>
형식에서
<td> <Link></Link> </td>
로 두 태그의 위치를 바꿔서 해결했다.
3.
[ Error ]
cannot read ... of undefined
props를 이용해서 하위 컴포넌트로 비동기로 받은 데이터를 넘겨줄 때 ,
데이터 값을 입력받기도 전에 먼저 화면이 렌더링 되면서 없는 값을 가지고 읽으려 했기 때문에 에러가 났다.
따라서 특정 상태값을 가지고 체크를 한번 해주도록 코드를 짰다.
상태값 !== [ ] ? <컴포넌트> : "" ->( 상태값이 빈배열이 아니면 컴포넌트를 렌더해랏! 근데 빈배열이면 암것도 보여주지 마라)
이런 식으로..
그런데
>>>>>> 상태값 !== [ ] <<<<<<
여기서 에러가 났다.
여기서 사용했던 상태는 배열형태인데, 빈배열과 비교가 안된다는 것이다.
[ Why? ]
const [test,setTest] = useState ([]);
// 이런 식으로 초기 상태값을 빈 배열로 선언해준 경우
이 상태값이 초기 빈배열값인지 , 혹은 다른 값으로 변했는지 비교해보고 싶을때
빈배열로 비교할 수 없다. 이럴때 배열은 길이로 비교하면 된다.
[Solve ]
잘못된 비교 )
test == [ ]
올바른 비교 )
test.length == 0
쉽게 생각하면 간단히 해결 가능한 문제인데, 업무중에 고민할때는 이상하게 머리가 굳어버린다.
너무 긴장해서 그런건지 조금 안풀린다 싶으면 바로 벽 느끼면서 멘탈이 말려버린다.
예전부터 깨닫고 있었지만 문제를 인식하는 것과 고치는 것은 다른 문제같다.
내가 아무리 천천히 생각하자 차분히 생각하자 되뇌인다고 한들 사고의 시야가 넓어지지 않는 것처럼
그냥 시간이 약이다 생각하고 익숙해지는 수 밖엔 답이 없을 것 같다 ^ㅡ^
John beo is victory