꾸밈없는 꾸밈없는

react

• [ReactJS] Error: React.Children.only expected to receive a single React element

  웹 개발/에러 2021. 5. 19. 15:03

  Error: React.Children.only expected to receive a single React element child. 위 에러의 원인은 react는 하나의 child element만 받기를 원하는데 태그 내 element가 두 개 이상일 경우 다음과 같은 에러가 생긴다. 나같은 경우는 CSSTransition 태그 안에 여러 개의 태그를 넣어서 생기는 문제였다. div로 묶어 하나의 child로 만들었더니 해결되었다. 공백이 원인인 이유도 있으니 주의해야겠다. 에러코드 setShowQst(false)} onExited={() => setShowQst(true)} > {qstDataSet[data].question} ... ... 에러 해결 setShowQst(false)} onExit..

  Read More
• [ReactJS] React state 관리

  웹 개발/ReactJS 2021. 5. 14. 21:40

  일반 변수는 변수값이 변해도 새롭게 렌더링 되지 않는다. let count = 1; 이를 해결하기 위해 state를 관리하여 DOM을 업데이트 하는 react hook들을 정리해보려 한다. useState 데이터 공간 생성 const [데이터, 데이터변경함수] = useState(초기데이터); ex) const [count, setCount] = useState(0); .. {setCount(count+1)}> -> onclick 이벤트를 통해 useState의 변수값이 바뀌면 컴포넌트가 새롭게 렌더링 된다. 이 때 랜더링마다 count 값을 업데이트 되는 것이 아니라 랜더링을 통해 새롭게 생성된 독립적인 상수를 보는 원리이다. ** Immutability react는 useState의 변수를 직접 바꾸..

  Read More
• [ReactJS] npm과 npx의 용어정리 및 차이점

  웹 개발/ReactJS 2021. 4. 8. 14:15

  react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이 없는거 같아 차이점을 알기 위해 정리해보았다. 기본용어정리 package.json : 모듈 설치시 자동으로 생성되는 node.js 버전 관리 파일node_modules : 모든 모듈의 저장공간 React : 많은 모듈들로 구성된 라이브러리로 이들 간의 상호작용이 중요하다. 따라서 npm으로 모듈 설치, node.js로 개발 작업환경을 구성한다. npm이란 npm은 node.js의 자동화 된 의존성과 패키지 관리를 위한 패키지 매니저이다. 1) 패키지 설치 프로젝트를 할 때 필요한 모든 의존성 패키지는 package.json 파일 안 에서 지정할 수 있다.npm i..

  Read More
• [ReactJS] ReactJS 설치 및 개발환경 구축 (mac)

  웹 개발/ReactJS 2021. 4. 7. 19:33

  1) 원하는 위치에 프로젝트 폴더 생성 2) node.js 설치 nodejs.org/ko/download/다운로드 | Node.jsNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org설치 여부 확인 (노드의 버전확인) node -v 3) ReactJS 설치 설치 전 아래 링크를 꼭 참고할 것 [ReactJS] npm과 npx의 용어정리 및 차이점 - https://seizemymoment.tistory.com/m/106[ReactJS] npm과 npx의 용어정리 및 차이점react를 설치하다보니 npm , npx 두 가지 방법으로 패키지를 설치할 수 있다는 것을 알게 되었다. 낯익은 용어지만 제대로 공부한 적이..

  Read More