codeGray

React 에서 useEffect 써서 한번만 실행하게 했는데 자꾸 콘솔에 두번씩 로그가 찍혀서 뭐 잘못한건가.. 30분을 삽질했는데 역시 검색이 최고입니다. index.js 에서 부분을 삭제해주시면 해결됩니다.

React js - react-router-dom v6 설치 사용방법 1. npm 설치 아래 명령어로 설치한다. npm i react-router-dom 2. 사용방법 react-router-dom 에서 3가지를 import 해주고 아래와 같이 사용한다. 여러가지 사용방법이 있지만 우선 기본적인 / 루트 페이지 호출 시 Home 컴포넌트를 호출하게 했다. import Home from './components/Home'; import { BrowserRouter as Router, Routes, Route } from 'react-router-dom'; function App() { return ( ); } export default App;

React JS - react-router-dom version 6 와 gh-pages 노마드코더님 강의를 보면서 리액트를 공부하고 있는데 리액트 라우터 버전6이 새로나와서 거기에 맞게 작성하다보니 에러가 났다. react-router-dom version 6를 쓰면 아래와 같은 에러가 발생 할 때가 있는데 Uncaught Error: useRoutes() may be used only in the context of a component. 이럴 경우 Router 로 Routes 를 감싸면 해결된다. 그리고 gh-pages 에서 제대로 인식하기 위해서는 path 에 process.env.PUBLIC_URL을 붙여주어야 한다. 왜 그런지는 모르겠다.. 공식문서상 그렇다니까.. 그렇게 해야지.. import..

React JS props 리액트는 컴포넌트 끼리 값을 보낼 때 props를 사용한다. 컴포넌트를 단순히 설명하면 함수 하나라고 할 수 있다. //Test component function Test(props){ return( {props.title} ) } //App component function App() { return ( ) } export default App; App 컴포넌트에서 Test 라는 컴포넌트를 가져다가 쓸 경우 html의 속성처럼 정의 할 수 있는데 이것을 props 라고 한다. App 에서 를 가져다 쓰는 부분은 onClilck 같은 html 속성은 사용 할 수 없다. 오직 사용자 정의 값이 들어간다. 나중에 컴포넌트를 파일별로 나누어도 App()에 나눈 컴포넌트만 import..

React JS state create-react-app 으로 react 프로젝트를 생성했다면 App.js 에서 개발이 가능하다. React는 변수를 사용 할 때 state라는 것을 사용한다. 자바스크립트에서는 변수를 html 안에 바인딩 할 때, innerHtml 로 넣어주고 다시 가져오려면 elementbyId 로 가져와서 변환하는 손이 많이 가는 작업을 해줘야 하지만 state는 간단하게 바인딩 가능하다. import { useState } from "react"; //state를 사용 할 수 있도록 import function App() { const [toDo, setToDo] = useState(""); const onChange = (event) => setToDo(event.target.v..

React Js 설치 React Js 는 npx 로 설치해야 해서 먼저 node.js 를 설치해야 한다. https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 위의 사이트에서 node.js 를 설치 해주고 vscode 를 실행시킨다. control (cmd) + j 를 누르면 터미널이 나타나고 터미널에서 자신이 설치하고 싶은 폴더로 이동한다. 그다음 아래 명령어로 설치 할 수 있다. npx create-react-app 프로젝트명 설치가 완료되면 npm start 로 실행 할 수 있다.