프론트엔드관련 책예제실습정리 (32) 썸네일형 리스트형 17.2 리덕스사용하여 리액트어플리케이션 상태관리 //index.js import App from './App'; //react application에 리덕스 적용하기 : createStore사용하기 //rootReducer도 불러와준다 //사용시 Provider 컴퍼넌트로 감싸주어야함 import {createStore} from 'redux'; import rootReducer from './modules'; import {Provider} from 'react-redux' import { composeWithDevTools } from 'redux-devtools-extension'; //redux devtools 크롬확장 프로그램 설치후, redux-devtools-extension 패키지 설치 + 해당 명령어 작성하면 //npm start 했을.. 17 .1리덕스 사용하여 리액트 어플리케이션 상태관리 리덕스의 정의: 리액트 상태관리 라이브러리, 여러 컴포넌트 거치지 않고 상태값 업데이트 가능(전역상태 관리시 효율적) (context api와 비교 : context api를 사용하는 것보다 큰 규모의 프로젝트에서 사용 개발자도구, 미들웨어 기능을 제공하여 비동기 작업을 더 쉽게 할 수 있음.) //1.액션 { type:"ADD_TODO", data :{ id:1, text:'리덕스배우기' } } { type:"CHANGE_INPUT", text:'안녕하세요' } //2,액션생성함수 function addTodo(data){ return{ type:'ADD_TODO', data }; } const changeinput = text = ({ type:"CHANGE_INPUT", text }); //3.초기.. redux3 두개 이상의 redux 사용 1.상위 컴퍼넌트에 redux combineReducer 활용해주고 createStore 함수에 combineReducer로 묶어줌 //index.js [..] import { Provider } from "react-redux"; import { createStore, combineReducers } from "redux"; let alert초기값 = true; function reducer2(state = alert초기값, 액션) { if (액션.type === "alert닫기") { state = false; return state; } return state; } let 초기값 = [ { id: 0, name: "멋진신발", quan: 2 }, { id: 1, name: "헤진신발", quan: .. redux2(redux 설정방법과 활용) **redux의 역할 : props전달이 용이, 데이터 수정방법정의 1.react-redux의 provider, redux의 createStore 불러와 주고 reducer함수로 초기값과 액션값 조건을 설정 //index.js [...] import { Provider } from "react-redux"; import { createStore } from "redux"; let 초기값 = [ { id: 0, name: "멋진신발", quan: 2 }, { id: 1, name: "헤진신발", quan: 5 }, ]; function reducer(state = 초기값, 액션) { if (액션.type === "수량증가") { let copy = [...state]; copy[0].quan++; retu.. redux 사용이유 1 (복잡한 props 사용하지 않아도됌) redux는 상위 컴퍼넌트에서 createStore로 하위컴퍼넌트들이 같은 값을 공유하게 만들수 있는 라이브러리 (Context API와 유사) 사용방법 1.react-redux, redux를 npm install 받은후 하단처럼 전달받을 하위 컴퍼넌트들에 묶고 데이터 전송 //index.js [..] import { Provider } from "react-redux"; import { createStore } from "redux"; let store = createStore(() => { return [{ id: 0, name: "멋진신발", quan: 2 }]; }); ReactDOM.render( , document.getElementById("root") ); [..] 하위 컴퍼넌트에 전달, .. 03-tab만들기까지 예제 **scss useContext 는 쓰지 않음 //index.js import React from "react"; import ReactDOM from "react-dom"; import "./index.css"; //index.js import App from "./App"; import reportWebVitals from "./reportWebVitals"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , document.getElementById("root") ); // If you want to start measuring performance in your app, pass a function // to log resu.. setTimeout 사용시 주의점 추후 내부에 복잡한 코드가 짜여질때 버그가 생길수 있으므로 꼭 clearTimeout 해주어야함. ex) useEffect(() => { let 타이머 = setTimeout(() => { alert변경(false); }, 2000); console.log("안녕"); return () => { clearTimeout(타이머); }; }, [alert]); useEffect 와 componentDidMount 차이 /*class Detail2 extends React.Component(){ // 자주쓰이는 두개의 훅으로, function에서는 useEffect로 대체됨 // didMout는 실행시, WillUnMount는 해제시 동작하는 라이프사이클 componentDidMount(){} componentWillUnMount(){} }*/ const Detail = (props) => { //1.컴퍼넌트로드시 실행(DidMount) //2.컴퍼넌트사라질떄 실행(unMount) //3.useEffect 훅 여러개 사용가능 (순서대로 사용) //1.2초후 타이머 실행 되고 alert값 false로 변경(alert만 실행,렌더링될때마다 실행되지x //useEffect 뒤 :[실행할 state값] //console.log.. 이전 1 2 3 4 다음