봉보로봉봉

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을 구독하는 모든 컴포..

부모 컴포넌트에서 자식 컴포넌트의 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

클린코드 함수를 작성할 때 함수는 한가지 일만 하도록 작성하는 것이 좋고, 함수 안에서 let으로 임시변수를 선언한 뒤 계속해서 값을 재할당 해 사용하는 것은 직관적이지 않고 유지보수가 힘들다. let의 유혹을 떨쳐버리고 const를 사용하는 습관을 들여야한다. 그리고 값을 변수에 담아 리턴하기 보다는 함수 자체에서 리턴 되도록 하는 것이 좋다. eqeq(==)사용을 줄이고 eqeqeq(===)를 써야한다. ==를 사용하면 암묵적인 형변환이 되기 때문에 원치않은 결과를 발생시킬 수 있다. ==와 ===는 큰 차이가 있다. (참고 사이트 확인) 개발을 혼자하는 것이 아니라면 지켜서 사용하는 것이 좋다. 타입이 다를 때 비교를 해야한다면 JS가 암묵적으로 형변환을 하게 두기보다 개발자가 명시적으로 형변환을 ..

저번에 설치하려고 했는데 안돼서 넘어갔는데 이 방법대로 하니 잘 됨! npx create-react-app my-app https://velog.io/@ash3767/React-%EC%97%90%EB%9F%AC React 에러 npx create-react-app 이러한 에러가 발생한다면 , >npm uninstall -g create-react-app npm add create-react-app 다시 npx create-react-app [app-name] velog.io

Absolutely Awesome React Components & Libraries