gh-pages란 github repository를 통해 github pages에 호스팅하게 해주는 라이브러리 npm i gh-pages package.json # ... "homepage": "https://J3SUNG.github.io/movie_app_2020" } package.json에 homepage 추가 https://{username}.github.io/{repository} ex) J3SUNG.github.io/movie_app_2020 gh-pages를 실행하는 스크립트 생성 (depoly) deploy가 실행되기전에 build가 필요하므로 predeploy 스크립트에서 npm run build를 실행 predeploy는 deploy가 실행되기전에 실행됨 npm run deploy

axios는 비동기 방식으로 HTTP 데이터 요청을 실행하는 HTTP 클라이언트 라이브러리 npm i axios # ... import axios from "axios"; # ... getMovies = async () => { const movies = await axios.get("https://yts-proxy.now.sh/list_movies.json"); console.log(movies); }; componentDidMount() { this.getMovies(); } #... componentDidMount가 되면 getMovies()가 실행됩니다. getMovies는 axios를 통해 해당 URL에 데이터를 요청합니다. 받은 데이터는 movies에 저장이되고 console.log()를 통해..

create-react-app은 리액트 기반의 프로젝트 개발 환경을 구성해주는 모듈 create-react-app에서 다음과 같은 환경을 구성 - 기본적으로 리액트는 자바스크립트 외부모듈인 react, react-dom, react-script들이 필요 - 상위 버전의 코드를 하위버전의 브라우저에서 작동 가능하도록 변경해주는 babel - 여러 자바스크립트 파일을 하나로 모아주는 모듈인 webpack - ... npx create-react-app hello_react npx create-react-app "경로/폴더명"을 입력합니다. 해당 폴더에 들어가면 다음과 같이 폴더와 파일이 생성된 것을 확인할 수 있습니다 리액트를 실행해 봅니다. 해당 폴더에서 터미널에 다음을 입력합니다. react start ..

react-router 설치 npm i react-router react-router-dom 설치 (웹에서 쓰는 라이브러리) npm i react-router-dom import React from "react"; import { BrowserRouter, HashRouter, Link, Route, Switch } from "react-router-dom"; import NumberBaseball from "../3. 숫자야구/NumberBaseball"; import RSP from "../5. 가위바위보/RSP"; import Lotto from "../6. 로또추첨기/Lotto"; import GameMatcher from "./GameMatcher"; const Games = () => { re..

Context API => 부모에서 자식에게 props를 넘겨줄 때 한 단계씩 넘겨줘야하는데 context를 이용하면 컴포넌트 트리 전체에 데이터를 제공 가능 import React, { useEffect, useReducer, createContext, useMemo } from "react"; export const TableContext = createContext({ tableData: [], halted: true, dispatch: () => [], }); const value = useMemo( () => ({ tableData: tableData, halted: halted, dispatch }), [tableData, halted] ); return ( {timer} {result} );..

useReducer를 사용하면 여러개의 state를 하나의 state와 하나의 setState로 통일 가능 import React, { useReducer } from 'react'; const initalState = { aState: '', bState: 0, cState: [1, 2, 3], }; const SET_ASTATE = 'SET_ASTATE'; const SET_BSTATE = 'SET_BSTATE'; const SET_CSTATE = 'SET_CSTATE'; const reducer = (state, action) => { switch (action.type) { case SET_ASTATE: { return { ...state, aState: action.aState, }; }, ca..

useMemo => 함수의 결과 값을 저장, 2번째 인자의 값이 바뀌면 다시 실행 (동일한 실행이 일어나는 함수에 사용) import React, { useMemo } from 'react'; const a = useMemo(() => b(), [xState, yState]); a가 b()함수의 return 값을 가짐 xState 또는 yState의 값이 바뀌면 useMemo()가 다시 실행되어 b()함수의 return값을 a에 저장 useCallback => 함수를 자체를 저장, 함수 컴포넌트가 재실행되도 해당 함수가 재생성되지 않음 (함수 생성 비용이 클 때 사용) import react, { useCallback } from 'react'; const aFunc = useCallback(() => ..

useEffect란 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook useEffect(() => { // 두번째 파라미터인 []이 수정될 때 마다 실행되는 코드 // []안에 값이 없을 경우 컴포넌트가 마운트될 때 최초 한번 실행 // 두번째 파라미터가 비어있을 경우 렌더링 될때마다 실행 return () => { // 컴포넌트가 제거되기 전에 실행되는 코드 } }, [input]) 컴포넌트가 마운트 될 때 최초 한번만 실행 클래스 컴포넌트 - componentDidMount() 함수형 컴포넌트 useEffect(() => { // code }, []) 컴포넌트가 업데이트 되는 경우 실행 클래스 컴포넌트 - componentDidUpdate() 함수형 컴포넌트 use..