오전
리액트 숙련 강의 복습유데미 리액트 강의 시작
오후
리액트 스터디 문서 읽고 정리- 알고리즘 문풀 12/9
- 겹치는 선분 https://school.programmers.co.kr/learn/courses/30/lessons/120876
세상에 너무 어렵다..
- 겹치는 선분 https://school.programmers.co.kr/learn/courses/30/lessons/120876
리액트 Redux
redux에서는 reducer에서 값의 수정, 변경이 일어난다.
reducer에게 명령을 보내야 한다. 명령; action
action객체에는 type이라는 키가 있어야한다. 명령을 보내기 위해서 useDispatch 훅을 써야한다.
dispatch 함수를 통해 action객체를 reducer로 보낼 수 있다
로직코드는 리듀서 안에 있는 스위치문안에 작성한다.
// src/App.js
import React from "react";
import { useSelector, useDispatch } from "react-redux"; // import 해주세요.
const App = () => {
//dispatch는 함수다. 사용할 때 괄호를 붙이고 그 안에 action객체를 넣어주면 된다.
const dispatch = useDispatch();
// const counterStore = useSelector((state) => state);
// console.log("counterStore", counterStore);
return (
<div>
<button
onClick={() => {
//함수형태로 작성된 dispatch()
//그 안에 전달된 action객체!!
//버튼을 클릭했을 때 dispatch를 통해서 +1이라는 action을 실행하라는 코드.
dispatch({ type: "PLUS_ONE" });
}}
>
+1
</button>
</div>
);
};
export default App;
// src/redux/modules/counter.js
// 초기 상태값
// 배열, 객체 다 됨
const initialState = {
number: 0,
};
// 리듀서 - 변화를 일으키는 '함수'
// state에 할당을 해줘야하고 action을 넘겨줘야한다.
const counter = (state = initialState, action) => {
console.log(action);
//스위치문으로 하나씩 검사해서 일치하는 객체를 찾는다!
switch (action.type) {
case "PLUS_ONE":
// 지금 {number: number+1}이라고 썼는데 이게 아니지.
//위에 state = initialState로 할당했잖아.
return { number: state.number + 1 };
default:
//반환한 state가 module의 새로운 state가 된다.
//그러면 이 state를 구독하는 컴포넌트에서는 업데이트된 state값을 받을 수 있게 된다.
return state;
}
};
// 모듈파일에서는 리듀서를 export default 한다.
export default counter;
// /src/redux/config/configStore.js
import { createStore } from "redux";
import { combineReducers } from "redux";
import counter from "../modules/counter";
/*
1. createStore()
리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다.
리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠?
리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요.
*/
/*
2. combineReducers()
리덕스는 action —> dispatch —> reducer 순으로 동작한다고 말씀드렸죠?
이때 애플리케이션이 복잡해지게 되면 reducer 부분을 여러 개로 나눠야 하는 경우가 발생합니다.
combineReducers은 여러 개의 독립적인 reducer의 반환 값을 하나의 상태 객체로 만들어줍니다.
*/
// store와 module을 연결해준다! -> 잘 연결됐나 어떻게 알지? ->컴포넌트에서 스토어를 직접조회하는 방법 = useSelector로 확인해보자
const rootReducer = combineReducers({
counter: counter,
});
const store = createStore(rootReducer);
export default store;
리액트 학습을 시작하면서 자스에 대해 너무 대강 알고 있는 것이 아닌가 하는 생각이 들었다. 그래서 다시 정리해보는 주요 개념과 문법들..
Export/ Import
//person.js
const person = {
name: 'Max'
}
export default person//utility.js
export const clean = () => {...}
export const baseData = 10;
//app.js
import person from './person.js'
//이름을 바꿔줄 수도 있다.
import prs from './person.js'
//name export라고 한다.
import {baseData} from './utility.js'
import {clean as cl} from './utility.js'
//모든 것을 import
import * as bundled from './utility.js'as키워드로 별칭을 할당해줄 수 있다.
클래스
리액트 컴포넌트를 생성할 때 사용할 수 있다.
클래스 : 프로퍼티와 메소드로 구성된다.
프로퍼티 : 클래스에 정의한 변수 ⬅️ 생성자 함수를 통해서도 선언이 가능하다.
메소드 : 클래스에 정의한 함수
this: 프로퍼티와 생성자 함수를 설정한다.
다른 클래스도 상속할 수 있다.
📌super()메소드를 생성자 함수 안에 먼저 작성해줘야 한다.
super(): 상위클래스의 생성자 함수를 실행한다.
super()메소드가 없어서ReferenceError가 났다.
클래스 실습 예제
- 최신문법 ES7을 사용하면 생성자 함수와 this를 생략하고 클래스의 프로퍼티 선언이 가능하다.
Spread/Rest
스프레드 : 배열이나 객체를 펼침
- 펼쳐놓은 배열 혹은 객체에 새로운 값을 추가하거나 덮어쓸 수 있다.
레스트 : 함수의 인자로
...사용function sortArgs(...args){ return args.sort() }매개변수를 무제한으로 받을 수 있다.
1개 이상의 매개변수 ➡️ 배열로 통합됨
구조분해할당
배열 또는 객체의 원소나 프로퍼티 하나만 가져와서 변수에 저장한다.
↔️ 스프레드 ; 모든 원소와 프로퍼티를 가져와 배열 또는 객체에 전달
- 객체의 경우
{name} = {name : 'Max', age : 28} console.log(name) // Max console.log(age) // undefined
해뜰날