Ming's develop story

App.js import React from "react"; import "./App.css"; import { Route } from "react-router-dom"; import Start from "./Start"; import Quiz from "./Quiz"; import Score from "./Score"; function App() { const [name, setName] = React.useState("우민기"); return ( ); } export default App; Start.js import React from "react"; import img from "./Teemo.png"; import { useHistory } from "react-router-dom"; impor..

1. Detail.js 에서 삭제하기 버튼 만들어주기 {bucket_list[bucket_index]}의 상세 페이지입니다! { console.log("삭제하기 버튼을 누름"); }} > 삭제하기 로 감싸주고 버튼을 만든뒤 console.log로 잘 작동 되는지 확인! ! 데이터 삭제를 하면 그 페이지에 남아있는 데이터가 없기때문에 뒤로가기나 메인페이지로 이동하게 만들어 줘야한다 (이거슨 FE개발자의 센스!!) import { useHistory } from "react-router-dom"; 뒤로가기 버튼 만들때처럼 useHistory를 사용 import 먼저 해주자! const history = useHistory(); 지정해주고, { console.log("삭제하기 버튼을 누름"); history...

1. 리덕스 훅 리덕스도 훅이 있는데 상태, 즉, 데이터를 가져오는 것 하나, 상태를 업데이트할 수 있는 것 하나 이렇게 두 가지를 정말 많이 쓴다! 더 많은 (훅 보러가기→) // useDispatch는 데이터를 업데이트할 때, // useSelector는 데이터를 가져올 때 씁니다. import {useDispatch, useSelector} from "react-redux"; 2. BucketList.js에서 redux 데이터 가져오기 const data = useSelector((state) => state.bucket.list); //앞의 state는 스토어가 갖고있는 전체 데이터 뒤는 리턴하는 값 console.log(data); 이런식으로 콘솔로 확인해서 내가 가져오려는 state의 값중 리..

덕스 (ducks) 구조 보통 리덕스를 사용할 때는, 모양새대로 action, actionCreator, reducer를 분리해서 작성한다. (액션은 액션끼리, 액션생성함수는 액션생성함수끼리, 리듀서는 리듀서끼리 작성한다) 덕스 구조는 모양새로 묶는 대신 기능으로 묶어 작성한다. (버킷리스트를 예로 들자면, 버킷리스트의 action, actionCreator, reducer를 한 파일에 넣으면 된다) 덕스 구조로 리덕스 모듈을 만들어 보자! 덕스 구조를 잘 설명해 주는 사이트 헷갈릴 때 들어가서 읽어보자 모듈을 만들때 복사할 기본 코드(사이트와 동일) // widgets.js // Actions 타입을 정해준다 const LOAD = "my-app/widgets/LOAD"; //서버에서 데이터를 가져올때..

리덕스 설치하기 redux - 리덕스 react-redux - 리덕스를 리액트에서 편히 쓸 수 있게 해주는 패키지 리덕스 공식문서 리덕스 개념과 용어 정리 리덕스는 데이터를 한 군데 몰아넣고, 여기저기에서 꺼내볼 수 있게 해주는 친구이다. 아래 용어들은 리덕스의 기본 용어인데, 내가 키워드 삼기 좋은 용어들이다. (1) State 👉 리덕스에서는 저장하고 있는 상태값("데이터"라고 생각하셔도 돼요!)를 state라고 불러요. 딕셔너리 형태({[key]: value})형태로 보관한다. (2) Action 👉 상태에 변화가 필요할 때(=가지고 있는 데이터를 변경할 때) 발생하는 것이다. 액션은 객체이다. 이런 식으로 쓰인다. type은 이름같은 것이고, 내가 정하는 임의의 문자열을 넣는다. {type: 'C..