개발(라이브러리,프레임워크)/react.js & react native32 Redux 개요, 사용 npm i redux Action 액션은 그냥 객체이다. 두가지 형태의 액션 { type : ‘TEST’} // payload없는 액션 { type: ‘TEST’, params : ‘hello’ } // payload 있는 액션 type만이 필수 프로퍼티이며, type은 문자열이다. 액션 생성자 사용 방법 function 액션 생성자(...args) { return 액션; } 액션 생성자를 통해 액션을 만들어 낸다. 만들어낸 액션 객체를 redux store에 보낸다. redux store가 액션 객체를 받으면 스토어의 상태 값이 변경된다. 변경된 상태 값에 의해 상태를 이용하고 있는 컴포넌트가 변경된다. 액션은 스토어에 보내는 일종의 인풋 액션 객체 만들기 action.js export const AD.. 2022. 1. 20. Hooks 동기 state로 관리하면 재사용하기가 어려웠음. 상태를 this.state를 다른데서 다르게 관리 해야하니까.. 계층 변화 없이 상태 관련 로직을 재사용할 수 있도록 도와준다. 복잡한 컴포넌트 경우 상태관련 로직을 한 공간안에서 묶여있기 때문에 작게 분리하는 것은 불가능 하며, 테스트 하기도 어려움. 또한 상태라이브러리는 많은 추상화, 파일들의 건너뛰기를 요구 하며 재사용하기 어려워졌다. 정리: class의 단점을 보완하면서 / 라이프사이클 등과 관련된 함수를 재사용 가능하도록 한다. 규칙 최상위에서만 hook을 호출해야 한다. 반복문, 조건문, 중첩된 함수내에서 hook실행 x React함수 컴포넌트 내에서만 hook을 호출해야 한다. State Hook 일반 import React from 'rea.. 2022. 1. 9. 라우팅 리액트 라우팅 대표적인 라우팅 패키지 설치 npm i react-router-dom 코드 작성 import { BrowserRouter, Route } from 'react-router-dom'; import About from './pages/About'; import Home from './pages/Home'; import Profile from './pages/Profile'; function App() { return ( ); } export default App; Route 컴포넌트에 Path와 Component를 설정하여 나열 BrowserRouter 로 Route들을 감싸줌 브라우저에서 요청한 경로에 Router의 path가 들어있으면 해당 component를 보여준다. 문제 결과를 보면 .. 2021. 9. 26. 컴포넌트 class 컴포넌트 function 컴포넌트 //정의 1 function FunctionComponent(){ return hello; } // 사용 ReactDOM.render(, document.querySelector("#root")) //정의 2 const FunctionComponent = () => Hello; // 사용 2 ReactDOM.render(, document.querySelector("#root")) React.createElement로 컴포넌트 만들기 // React.createElement( // type, //태그 이름 문자열 | 리엑트 컴포넌트 | React.Fragment // [props], //리엑트 컴포넌트에 넣어주는 데이터 객체 // [...children] //.. 2021. 9. 24. 이전 1 2 3 4 5 6 7 8 다음 반응형
