Dev Diary 💻

Intro안녕하세요. react 사용 중 다음의 에러가 발생하였습니다. Warning: Failed prop type: Invalid prop checked of type string supplied to ..., expected boolean.  Why?const MemoizedCheckbox: React.FC = React.memo(({ checked, onChange, value }) => { return })... } label={data} labelPlacement='end' /> 오류의 원인은 MemoizedCheckbox 컴포넌트의 checked prop에 문자열 타입이 전달되었기 때문입니다. checked prop은 boolean 타입을 기대하고 있으며, 문자열이 전..

Intro안녕하세요. 리액트를 사용하던 도중 Warning: validateDOMNesting(...): cannot appear as a child of 에러가 발생했습니다. How to solve the problem코드를 살펴보니 tbody 태그가 없었습니다. 아래의 코드로 수정한 결과 에러가 더이상 발생하지 않았습니다.

Intro 안녕하세요. 이번 시간에는 react 에서 useRef 사용시 undefined / null 오류 발생 원인과 해결 방법에 대해 알아보도록 하겠습니다. 우선 제가 useRef를 사용한 코드 예제는 아래와 같습니다. clientHeight를 조절하기 위해 useRef를 사용하여 div tag에 적용했습니다. const divRef = useRef(null); const [handlePosition, setHandlePosition] = useState('300vh'); useEffect(() => { setHandlePosition(`${(divRef.current.clientHeight * 3) / 300}px`); }, []); return ( {/* some content */} ); 하지..

Intro 안녕하세요. 이번 시간에는 리액트에서 종종 나타나는 오류인 Module not found: Can't resolve 에 대해 알아보려고 합니다. Module not found: Can't resolve "라이브러리명" 운영 이슈가 접수되어 해당 이슈를 해결하기 위해 project 를 열었는데요, 갑자기 run 타임에 위와 같은 오류가 발생했습니다. 따로 추가 설치한 라이브러리도 없었는데 왜 오류가 나는지 모르겠더라고요. 터미널에 나타난 해당 라이브러리를 설치해도 똑같은 에러가 발생했습니다. 버전을 바꾸고, 해당 라이브러리를 다시 설치해도 계속 같은 오류가 발생했구요. 그래서 최후의 수단으로 다음의 방법을 사용했습니다! How to solve 1. 아래 파일 및 폴더를 삭제합니다. - yarn-..

Intro 전달받은 props를 map 함수를 이용하여 table를 만들던 도중 다음의 오류가 발생하였습니다. Warning: validateDOMNesting(...): cannot appear as a child of test test test test test test {props.map((item, index) => { return ( {item} {item} {item} {item} {item} {item} ); })} 제가 봤을 때는 분명 각 자식에 index 라는 key 값을 부여하고 있다고 생각했는데요.. Why? 하지만..알고보니 원인은 바로 에 있었습니다.. key 값은 root component에 적용 되는 것이 원칙이기 때문이죠. 하지만 저는 OtherComponent 를 함께 작성..