오늘도 기록it

상태를 가지고 있는 엘리먼트 input, select, textarea ... 엘리먼트의 상태를 관리 엘리먼트를 가지고 있는 컴포넌트가 관리 controlled 엘리먼트의 상태를 관리하지 않고, 엘리먼트의 참조만 컴포넌트가 소유 Uncontrolled controlled component import React from 'react'; class ControlledComponent extends React.Component { state = { value:"", }; render() { const { value}=this.state; return ( ); } change = (e) => { console.log(e.target.value); this.setState({value:e.target.value..

별도의 라이브러리를 이용해서 style을 더 편하게 하는 방법 Components에 style을 주는 방법 npm i styled-components //설치 import logo from './logo.svg'; import './App.css'; import StyledButton from './components/StyledButton'; import styled, { createGlobalStyle } from 'styled-components'; import StyledA from './components/StyledA'; const PrimaryStyledButton = styled(StyledButton)` background: palevioletred; color : white; `; co..

import { BrowserRouter,Route,Switch } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; import NotFound from "./pages/NotFound"; import Links from "./components/Links"; import NavLinks from "./components/NavLinks"; import Login from "./pages/Login"; function App() { return ( ); } export default App; import LoginBut..

import { BrowserRouter,Route,Switch } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; import NotFound from "./pages/NotFound"; import Links from "./components/Links"; function App() { return ( ); } export default App; app.js 이런 결과가 나오고 링크를 타고 가도 새로고침이 안되고 화면이 바로 나오는걸 확인 할 수 있다. NavLink import { NavLink } from 're..

Switch 여러 Route 중 순서대로 먼저 맞는 하나만 보여준다. exact 를 뺄 수 있는 로직을 만들 수 있다. 가장 마지막에 어디 path 에도 맞지 않으면 보여지는 컴포넌트를 설정해서, Not Found 페이지를 만들 수 있다. import { BrowserRouter,Route,Switch } from "react-router-dom"; import About from "./pages/About"; import Home from "./pages/Home"; import Profile from "./pages/Profile"; import NotFound from "./pages/NotFound"; function App() { return ( ); } export default App; 작은..

import queryString from 'query-string'; export default function About(props) { console.log(props); const searchParms = props.location.search; console.log(searchParms); //첫번째 방법 //const obj = new URLSearchParams(searchParms); //URLSearchParams 방법[브라우저 내장 객체] //console.log(obj.get('name')); //mark //두번째 방법 //npm i query-string const query = queryString.parse(searchParms); console.log(query); //{na..

SPA Single Page Application 서버에서 큰 APP을 받아오고 url에 따라서 어떤 페이지를 보여줄지 결정 SPA 라우팅 과정 브라우저에서 최초에 / 경로로 요청하면 React Web APP 을 내려주고 내려받은 React App에서 / 경로에 맞는 컴포넌트르 보여준다. React App에서 다른 페이지를 이동하는 동작을 수행하면, 새로운 경로에 맞는 컴포넌트를 보여준다. React-router npm i react-router-dom cra에 기본 내장된 패키지가 아니다. react-router-dom은 facebook의 공식 패키지가 아니고 가장 대표적인 라우팅 패키지이다. 예제 npx create-react-app react-router-example npm i react-rout..

ESLint mkdir eslint-test //으로 파일을 만들고 cd eslint-test //으로 경로 옮기고 npm init -y //으로 npm 프로젝트로 만들고 npm i eslint -D //로 eslint 설치하고 npx eslint --init // eslint 초기화 prettier mkdir prettier-test //으로 파일을 만들고 cd prettier-test //으로 경로 옮기고 npm init -y //으로 npm 프로젝트로 만들고 npm i prettier -D //설치 npx prettier index.js //해당파일을 넣어서 실행시키면 옳바른 방법으로 작성된 코드가 출력된다. npx prettier index.js --write //이렇게 써주면 파일의 값이 바뀐다..

CRA https://create-react-app.dev/ 리액트 에플리케이션을 만드는 툴에 대해 설명하고 있다. npx create-react-app tic-tac-toe // tic-tac-toe이라는 이름으로 리액트 파일 설치 이렇게 설치가 완료된다. npm install serve -g // serve 라는 패키지를 전역으로 설치 serve -s build //serve 명령어를 -s 옵션으로 build 폴더를 지정하여 실행 -s 옵션은 어떤 랑팅을 요청해도 index.html 을 응답한다. eject를 이용하면 cra로 만든 프로젝트에서 cra를 제거 돌이킬수 없기 때문에 신중하게 결정해야 한다.

constructor componentWillMount => getDerivedStateFromProps render componentDidMount componentWillReceoveMount => getDerivedStateFromProps shouldComponentUpdate render componentWillMount => getSnapshotBeforeUpdate (dom에 적용) componentDidUpdate componentWillUnmount 이렇게 변경이 되었다.