Jeffrey Oh's Notepad

Frontend/React 검색 결과

해당 글 4건

[리액트 및 리듀서 기본 설정] React & Reducer Default Settings

[리액트 및 리듀서 기본 설정] React & Reducer Default Settings 프로젝트 생성 후 초기화 작업프로젝트 폴더 안에서 패키지 설치yarn add react-router-dom yarn add styled-components yarn add axios (선택사항 API용도) yarn add redux yarn add react-redux yarn add redux-actions yarn add redux-devtools-extension yarn add redux-logger yarn add redux-thunk /src 폴더 안에서 App.css, index.css, logo.svg 삭제App.js 파일과 index.js 파일에서 삭제한 파일 관련 구문 삭제index.js 파일에서..

Frontend/React 2020. 2. 23. 10:41

Github Pages 배포

Github Pages 배포1. package.json 파일 수정 "scripts": {... "deploy": "gh-pages -d build","predeploy": "npm run build"},........."homepage": "https://{GithubUserId}.github.io/{RepositoryName}// Ex) "homepage": "https://Jeffrey-Oh.github.io/react_movie_app_2019" 3가지를 스크립트 안에 추가한다. 2. gh-pages 설치npm i gh-pages 로 패키지를 설치한다 3. 배포터미널에서 `npm run build` 를 입력하고 아까입력한 `homepage` 링크로 가서 확인한다

Frontend/React 2020. 2. 9. 23:49

React - Current Time

import React from "react"; const Clock = () => { const [clock, setClock] = React.useState(""); const getTime = () => { const date = new Date(); const hours = date.getHours(); let minutes = date.getMinutes(); let sec = date.getSeconds(); let currentTime = `${hours < 10 ? `0${hours}` : hours}:${ minutes < 10 ? `0${minutes}` : minutes }:${sec < 10 ? `0${sec}` : sec}`; setClock(currentTime); }; Reac..

Frontend/React 2020. 2. 4. 23:27

Component Life Cycle

Component Life Cycle Component Life Cycle componentDidMount() { // 렌더링 후 console.log("component rendered");}componentDidUpdate() { // setState가 호출되고 렌더링 후 console.log("I just updated");}componentWillUnmount() { // 페이지가 이동하여 컴포넌트가 죽은 후 console.log("Goodbye, cruel world");} render() { // 렌더링 console.log("I'm rendering");} 많이 사용되는 컴포넌트 라이프 사이클 중 중요한 3가지Mount, Update, UnMount 이며 각각 렌더링 되고난 후, setSta..

Frontend/React 2019. 12. 31. 23:49