리액트에는 Hook 이라는 개념이 있다. 그 중 대표적이며 필수적인 것이 useState, useEffect이다 먼저 useState 에 대한 이해가 전제가 되어야 리액트 진행이 가능하다. 리액트는 state, 즉 상태라는 개념이 있는데 이 state가 변경이 되면 페이지의 리로딩 없이 그 변경되는 부분만 렌더링 한다. 이번 전체 코드는 아래와 같다. import React, { useState, useEffect } from 'react'; function Test1() { const [id, setId] = useState(0); function stateTest() { setId(id+1) } useEffect( () => { alert("ok") }, [] ); } return ( test{id}..

생성한 프로젝트를 보면 index.js 파일이 있다. 리액트가 실행이 되면 해당 파일을 실행하는데 해당 파일을 보면 아래와 같이 되어있다. import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( , document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: re..

1. node.js 설치 nodejs.org/ko/download/ 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 해당 페이지에서 운영체제에 맞는 파일을 받아 설치한다. 설치 후 cmd 를 실행하여 노드 및 npm설치 여부를 확인한다. 노드를 설치하면 자동으로 npm이 설치 된다. npm 은 노드에서 사용하는 오픈소스 및 라이브러리를 다운받기 위한 도구로 친해져야한다. 2. npx 설치 npm i npx 를 통해서 npx를 설치한다. 3. create-react-app 이제 cmd 창에서 경로를 이동하여 원하는 위치에 리액트 프로젝트를 만들 것이다. 경로 이동 후 npx cr..

기존 Component를 이용하는 react에서 특정 동작이후 redirect를 하려면 history.push("/")를 사용했다. Functional react에서는 react-router-dom의 useHistory를 이용하여 페이지 이동을 시킨다. import {useHistory} from "react-router-dom" let history = useHistory(); function callback(data) { if(data == "ok"){ console.log("ok") history.push("/users"); } } 다음과 같은 방법으로 결과에 따라서 페이지 이동이 가능하다.(로그인,로그아웃시 사용)

React에서 img태그의 경로를 지정할 때 그냥 지정하면 적용이 안된다. React에서 img의 src 경로를 다음과 같이 설정하면 된다. {require(경로)}

nodeJS 없이 React만으로 fetch로 API를 받아오는 중 cors문제가 발생했다. 이를 해결하기 위해서는 다음과 같이 작성하여 fetch를 받아오자 const proxyurl = "https://cors-anywhere.herokuapp.com/"; const url = "API 주소"; fetch(proxyurl + url) .then(response => response.json()) .then(contents => setStatsInfo({stats:contents})) .catch(() => console.log("stats 데이터를 가져오는데 실패했습니다.")) }