봉보로봉봉

스타일드 컴포넌트를 사용해서 깜빡이는 스타일링을 주려고 blink라는 state를 선언해서 props로 넘겨줬는데 이런 메세지가 떴다. Warning: Received `false` for a non-boolean attribute `blink`. 이유 html 태그 속성 중에 props와 동일한 이름을 가진 속성이 있다면 저 경고 메세지가 뜨는 것이었다. 그래서 props를 넘겨줄때 prefix로 $를 붙였더니 메세지가 사라졌다. 참고

올해 초쯤에 처음으로 리액트 강의를 듣고 공부해서 만들었던 투두리스트 프로젝트를 다시 열어봤다. 코드를 이렇게 짰다니 지금 실력이 많이 늘었다는 것을 느낄 수 있었다..😀👍 맨 처음 들어가면 보이는 화면. 왜 정렬을 저렇게 했는지 모를 노릇이다.. css도 잘 못 다뤘나보다.. 수정도 가능하고, 추가도 가능하다. 용케도 투두리스트 기본 기능은 다 구현했다. 그리고 이때 달력도 달고 싶었는데 할 줄 몰라서 못 달았던 기억이 있다. 달력도 빈 파일이지만 파일은 생성되어 있었다. 그리고 코드를 뜯어봤더니 모자랐던 실력의 내가 너무 귀엽고 웃겼다🤣 !연산자를 모르는지 반대의 값을 주기 위해서 삼항연산자를 사용했다. 불리언을 조건으로 쓸 생각도 못해서 어차피 불리언인 값을 ===을 이용해서 비교하고 있다. 프로젝..

Recoil는 React를 위한 상태 관리 라이브러리다. 따라서 Recoil를 사용하기 위해서는 React가 설치되어 있어야 한다. 리코일 설치 npm install recoil // or npm install recoil --save RecoilRoot recoil state를 사용하려면 어딘가의 부모 컴포넌트에서 RecoilRoot로 감싸주어야한다. import { RecoilRoot } from 'recoil'; function App() { return ( ); } Atom atom은 전역 상태라고 보면 된다. Atoms는 어떤 컴포넌트에서나 읽고 쓸 수 있다. atom의 값을 읽는 컴포넌트들은 암묵적으로 atom을 구독한다. 그래서 atom에 어떤 변화가 있으면 그 atom을 구독하는 모든 컴포..

이번에 프로젝트를 진행하면서 Recoil을 이용해서 상태관리를 했는데 recoilState를 변경하려고 하는데 변경은 안되고 자꾸 온갖 에러만 바뀌어 가면서 발생했다. TypeError: Cannot add property 0, object is not extensible. TypeError: can't delete non-configurable array element. 이거 말고도 2개 정도 더 떴던 것 같은데 자꾸 에러가 바뀌니까 원인을 알 수가 없었다. 이유 기존 state 자체를 변경하려고 해서 그랬다. 기존 state의 복사본을 변경했어야 했는데 기존 state를 변경하도록 코드를 작성해서 에러가 났던 거였다. 코드를 왜 그렇게 작성했는지 모르겠지만 불변성을 지켜줘야하는 걸 잊지 말자!😀 참고

부모 컴포넌트에서 자식 컴포넌트의 state를 조작해야하는 상황이 생겼는데 나의 경우에는 ref를 여러개의 자식 컴포넌트에 달아서 조작하려고 했다. 그런데 ref는 current로만 접근할 수 있어서 마지막 하나의 자식 컴포넌트의 함수만 실행할 수 있었다. 한번에 여러개를 조작하려고 하시는 분은 참고하시길..! 부모 컴포넌트에서 자식 컴포넌트 state 조작하기 useRef를 사용해서 부모 컴포넌트에서 자식 컴포넌트를 조작할 수 있다. 먼저 부모 컴포넌트에서 ref를 선언해서 자식 컴포넌트로 넘겨준다. import { useRef } from 'react'; import Child from './Child'; import styled from 'styled-components'; const Parents..

input 체크박스를 클릭하면 onClick이벤트가 2번 발생하는 이유 input checkbox를 커스텀해서 체크박스를 구현했다. 체크박스를 선택하면 해당 체크박스에 해당하는 쿼리스트링이 쿼리스트링을 관리하는 배열에 들어가는데 한 번 클릭했는데 2번씩 들어갔다. React.StrictMode 때문인가 싶어서 없애고 클릭해봐도 계속해서 2번 들어갔다. ... el.name === text)[0].checked} readOnly /> {text} ... 대략적인 구조는 이렇게 되는데 자꾸 onClick 이벤트가 2번 발생했다. 검색을 해봐도 strict 모드를 때문이다라고 나와서 결국 영어로 검색하다가 왜 그런지 이유를 찾았다. 영어를 못해도 영어 검색을 생활화하자...🥲 label태그와 input태그는 ..

열심히 map을 쓰고 있었는데 떴다. Expected an assignment or function call and instead saw an expression. 예상하고 있던 할당 또는 함수 호출 대신 식이 발견되었습니다. 이유 map()을 쓰면서 return을 해주지 않았기 때문이다. // Bad -> Error array.map((num)=>{num*2}) // Good array.map((num)=>{return num*2}) // or array.map((num)=>num*2) 지난번에도 return을 안써줘서 에러가 떴던 것 같은데 또 까먹었다. 제발 return을 잊지말자... map을 쓸 때 중괄호를 안쓰고 코드를 작성하는 방식으로 습관을 들여야하나 싶다. 🤔 참고

기본 html input checkbox를 span과 label을 onClick 이벤트를 이용해서 커스텀을 했더니 에러 메세지가 떴다. You provided a 'checked' prop to a form field without an 'onChange' handler. 너는 checked prop을 onChange 이벤트 핸들러 없이 썼다. 이유 input checked를 사용하려면 onChange를 이용해서 사용해야하기 때문이다. onChange를 사용하거나 속성으로 readonly를 넣어주거나 checked속성 대신 defaultChecked를 사용하면 된다. 나는 readonly를 사용해서 해결했다. 참고1 참고2