프론트엔드관련 책예제실습정리/CO.APP(react) (7) 썸네일형 리스트형 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.. 모달변경하기(UI state로 관리해보기) 1.state에는 데이터 뿐만 아니라 UI상태도 저장해서 사용한다. display: none block의 경우도 state 상태관리로 금방 만들수가 있다 2.jsx 안에서 if 문작성하려면 {삼항다항식} 을 사용한다. 삼항다항식에서 state의 조건을 변경시켜 UI를 조작하고, 원하는 태그에 적용시킬수 있음 [...] let [모달, 모달변경] = useState(false); return ( 따봉만들기실습 {모달 === true ? : null} {글제목[0]} 따봉변경(따봉 + 1)}> ✌{따봉} 버튼 {글제목[1]} 따봉변경(따봉 + 1)}> ✌{따봉} { 모달변경(true); }} > 모달보이기 {글제목[2]} 따봉변경(따봉 + 1)}> ✌{따봉} ); }; function Modal() { re.. 이전 1 다음