목록2021/03/23 (3)
hmk run dev
import React from "react"; import { useSelector, useDispatch } from "react-redux"; const Detail = (props) => { const schedule_list = useSelector((state) => state.schedule.list); console.log(schedule_list, props); //콘솔로 store 정보들이 잘들어 왔나 확인 return ; }; export default Detail; App.js Schedule.js return ( { props.history.push("/detail/" + index); }} > {list} ); Detail.js import React from "react"; i..
일단 리덕스모듈과 그것을 담아줄 스토어를 만들어야한다 schedule.js //Action 액션의 변수는 전부 대문자 약속~ //모듈명 소문자 액션명 대문자 //우리가 만든기낭 스케줄 띄워주는거 = load/ 스케줄 만드는것 create const LOAD = "schedule/LOAD"; const CREATE = "schedule/CREATE"; const initialState = { list: ["영화관 가기", "매일 책읽기", "수영 배우기"], //맨처음 state 초기값 }; //Action Creator //액션 생성 함수는 액션을 반환해줘야 하는 함수다 //액션 생성 함수는 컴포넌트들에게서 불러와야한다 export //export는 export default와 다르게 import시 중괄..
history 리액트에서 페이지를 이동할 수 있는 이유는 react-router-dom을 이용하여 페이지의 기록을 알 수 있기 때문이다. 아래 샘플 코드의 App.js에서와 같이 Router로 컴포넌트의 Path와 라우팅할 컴포넌트를 정해줄 수 있는데, 해당하는 라우터는 props를 통해 history 객체를 전달받게 된다. history 객체를 콘솔로 찍어보면 아래와 같이 goBack(), goForward() 등 앞/뒤로 이동할 수 있는 메소드 뿐만 아니라 다양한 메소드와 관련 객체들이 존재한다. 이 중 라우팅 변경을 위해 가장 빈번히 사용되는 메소드가 push()인데, history.push('이동하고자 하는 path') 를 통해 원하는 컴포넌트로 이동이 가능하다. >> history 객체를 pro..