Archive
오늘 한 것
설 연휴동안 공부 많이 해야지.
오늘의 한 줄 총평 : 최근 공부량이 줄었다. 반성.
오늘 한 것
리액트 어렵다..
오늘의 한 줄 총평 : 리액트 어렵다
Redux 개요
출처 : Udemy / React - The Complete Guide
Redux 기본 사용법
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import reducer from 'path/reducer';
// store 생성, reducer를 넣어준다
const store = createStore(reducer);
ReactDOM.render(
// 하위 컴포넌트를 Provider로 감싸고 store 연결
<Provider store={store}>
<App />
</Provider>
document.getElementById('root')
);
const initialState = {
counter: 0,
};
// ES6 default parameter, state가 undefined일 경우 initialState로 초기화
const reducer = (state = initialState, action) => {
if(action.type === 'INCREMENT') {
return {
counter: state.counter + 1,
}
}
return state;
};
export default reducer;
import React from 'react';
import { connect } from 'react-redux';
class Counter extends React.Component {
redner() {
return (
<button onClick={this.props.onIncrementCounter}>
{this.props.ctr}
</button>
);
}
}
const mapStateToProps = state => {
return {
ctr: state.counter,
};
}
const mapDispatchToProps = dispatch => {
return {
onIncrementCounter: () => dispatch({ type: 'INCREMENT'}),
};
}
export default connect(mapStateToProps,mapDispatchToProps)(Counter);
payload
const mapDispatchToProps = dispatch => {
return {
onIncrementCounter: () => dispatch({ type: 'INCREMENT', value: 5}),
};
}
const reducer = (state = initialState, action) => {
if(action.type === 'INCREMENT') {
return {
counter: state.counter + action.value,
}
}
return state;
};
Updating State Immutably
const initialState = {
counter: 0,
result: [],
};
const reducer = (state = initialState, action) => {
if(action.type === 'INCREMENT') {
return {
...state, // 객체 복사
counter: state.counter + action.value,
}
}
if(action.type === 'STORE') {
return {
...state, // 객체 복사
results: state.results.concat({
// id는 임시 id
id: new Date(), value: state.counter }),
}// 기존배열을 직접 수정하지 않기 위해 concat 사용
}
return state;
};
export default reducer;
Constant Action Type
export const INCREMENT = 'INCREMENT';
export const DECREMENT = 'DECREMENT';
// 상수가 담긴 js 파일, 사용처에서 import하여 사용한다
import * as actionTypes from 'path/actions';
const reducer = (state = initialState, action) => {
if(action.type === actionTypes.INCREMENT) { // 상수 사용
return {
...state, // 객체 복사
counter: state.counter + action.value,
}
}
import * as actionTypes from 'path/actions';
const mapDispatchToProps = dispatch => {
return {
onIncrementCounter: () => dispatch({ type: actionTypes.INCREMENT, value: 5}),
};
}
Combining Multiple Reducers
// store를 정의한 최상위 컴포넌트에서
import { createStore, combineReducers } from 'redux';
import counterReducer from 'path/counter';
import resultReducer from 'path/result';
const rootReducer = combineReducers({
ctr: counterReducer,
res: resultReducer,
});
const store = createStore(rootReducer);
const mapStateToProps = (state) => {
return {
// state의 블럭 단위가 한 단계씩 늘어난다
ctr: state.ctr.counter,
storedResults: state.res.results,
};
};
<button onClick={() => this.props.onStoreResult(this.props.ctr)}></button>
const mapDispatchToProps = (dispatch) => {
return {
onStoreResult: (result) => dispatch({
type: actionTypes.STORE, result: result })
}// action을 이용하여 state를 전달
}
const reducer = (state = initialState, action) => {
if (action.type === actionType.STORE) {
return {
...state,
results: state.results.concat({
id: new Date(),
value: action.result,
}),
};
}
}
Udemy - React The Complete Guide
리덕스(Redux)의 리듀서(reducer)가 순수 함수여야만 하는 이유
오늘 한 것
리액트 공부 Redux - 리덕스의 기초적인 개념을 배웠는데 아직은 감이 잘 오지 않는다. 이론적인 부분을 다 나가고 실제로 사용해보면서 익혀야겠다.
학원 비대면 수업(15:30~22:00) HTML - 학원 진도가 늦어 초스피드로 하루 만에 HTML을 끝내버렸다. 자료가 옛날 자료라 지금 웹표준에 맞지 않는 부분도 많은데 그래도 다시 한 번 HTML을 정리해 볼 수 있었다.
학원 커리큘럼에 자바스크립트도 포함되어 있지만 이틀 배우고 끝이다. 메인 언어가 자바라서 아쉽다. 자바스크립트를 주 언어로 사용하고 싶은지라 이쪽 생태계의 라이브러리나 프레임워크는 내가 알아서 공부해야지.
오늘의 한 줄 총평 : 수박 겉 핥기..
다행히 발표를 무사히 마쳤지만 절대 자만하지 않고 그냥 원래 하던대로 내 하루 공부량 채우면서 꾸준히 가자.
오늘의 한 줄 총평 : 개인 프로젝트 종료