오늘도 기록it

개요 1.단일 스토어를 만드는 법 2.리액트에서 스토어 사용법 import redux 하고 액션을 정의하고 사용하는 리듀서를 만들고 리듀서들을 합치고 최종 합쳐진 리듀서를 인자로 단일 스토어를 만든다. import react-redux conntect 함수를 이용해서 컴포넌트에 연결 1.npm i redux Action 액션은 객체이다. 두 가지 형태의 액션이 있다. {type:'TEST'} //payload 없는 액션 , {type:'Test', params:'hello'} //payload 있는 액션 type 만이 필수 프로퍼티이며 type은 문자열 액션을 생서하는 함수를 "액션 생성자(Action Creator 라고 한다. 함수를 통해 액션을 생성해서, 액션 객체를 리턴한다. createTest('..

spa 프로젝트 배포 serve 패키지로 react 배포 npm install serve -g //serve라는 패키지를 전역으로 설치 serve -s build //serve -s 옵션으로 build 폴더를 지정하여 실행 -s 옵셥은 어떤 라우팅으로 요청해도 index.html 을응답 node.js express로 react npm i express server.js 파일 만들고 const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname,'build'))); app.get('*',(req, res) => { res.sendFil..

Reconciliation 랜더 전후의 일치 여부를 판단하는 규칙 서로 다른 타입의 두 엘리먼트는 서로 다른 트리를 만들어낸다. 개발자가 key prop을 통해, 여러 렌더링 사이에서 어떤 자식 엘리먼트가 변경되지 않아야 할지 표시해 줄 수 있다. import "./App.css"; import React from "react"; class Foo extends React.Component { componentDidMount() { console.log("Foo componentDidMount"); } componentWillUnmount() { console.log("Foo componentWillUnmount"); } static getDerivedStateFromProps(nextProps, pre..

unit Test & Jest Easy Setup, Instant Feedback(고친 파일만 빠르게 테스트 다시 해주는 기능) Snapshot Testing 컴포넌트 테스트에 중요한 역할 npm init -y npm i jest -D 이런식으로 test 할 수 있다. npx jest --watchAll 옵션을 주면 jest가 계속 실행되고 있고 저장할 때 마다 테스트가 자동으로 돌아간다. describe("expect test", () => { it("37 to equal 37", () => { expect(37).toBe(37); }); it("{age:39} to equal {age:39}", () => { expect({ age: 39 }).toEqual({ age: 39 }); }); it("...

https://ko.reactjs.org/docs/context.html 하위 컴포넌트 전체에 데이터를 공유하는 법 데이터 set하는놈 가장 상위 컴포넌트 => 프로바이더 데이터를 Get 하는 놈 모든 하위 컴포넌트에서 접근 가능 컨슈머로 하는 방법 클래스 컴포넌트의 this.context 로 하는방법 평셔널 컴포넌트의 useContext 로 하는 방법 데이터를 set하기 1. 일단 컨텍스트를 생성 2. 컨텍스트, 프로바이더를 사용한다. 3. value 를 사용 import React from "react"; const PersonContext = React.createContext(); export default PersonContext; src->contexts->PersonContext.js imp..

하위 컴포넌트 변경 import { useState } from "react"; export default function A() { const [value, setValue] = useState("아직 안바뀜"); return ( E의 값을 바꾸기 ); function click() { setValue("E의 값을 변경"); } } function B({ value }) { return ( 여긴 B ); } function C({ value }) { return ( 여긴 C ); } function D({ value }) { return ( 여긴 D ); } function E({ value }) { return ( 여긴 E {value} ); } 상위 컴포넌트 변경 import { useState }..

https://v5.reactrouter.com/web/api/Hooks 4가지가 있다. useHistory useParams

useReducer 다수의 하윗값을 포함하는 복잡한 정적 로직을 만드는 경우 다음 state 가 이전 state에 의존적인 경우 redux 를 안다면 쉽게 사용 가능 import { useReducer } from "react"; //reducer => state를 변경하는 로직이 담겨 있는 함수 const reducer = (state,action) => { if(action.type === 'PLUS') { return { count:state.count+1 }; } return state; } //dispatch => action 객체를 넣어서 실행 // action = > 객체이고 필수 프로퍼티로 type 을 가진다. export default function Example6() { const [..

import logo from './logo.svg'; import './App.css'; import Example1 from './components/Example1'; import Example2 from './components/Example2'; import Example3 from './components/Example3'; import Example4 from './components/Example4'; import Example5 from './components/Example5'; import useWindowWidth from './hooks/useWindowWidth'; function App() { const width = useWindowWidth(); return ( {width..

Basic Hooks - useState, useEffect 기본 class를 사용하는 방법에서 useState를 사용해서 이런식으로 가능하다. import logo from './logo.svg'; import './App.css'; import Example1 from './components/Example1'; import Example2 from './components/Example2'; function App() { return ( ); } export default App; App.js 파일이다. 결과는 똑같이 잘 출력되는걸 확인 가능하다. import React from 'react'; //useState => count //useState => {count : 0}; export defa..