TIL 65일차 | 브랜디 기업 협업 10일차
Today
- 공통 style 컴포넌트로 생성
- 셀러 등록 페이지
- 테이블 형식으로 된 내용들 컴포넌트화 시키기
- 타이틀부분은 값들이 제목과 ’*’ 형식으로 일정하기 때문에 props로 값을 받아서 컴포넌트 생성
- 내용 부분은 형식이 크게 다르기 때문에 틀만 잡아놓고 props.children 안에 내용 생성
TableBox 컴포넌트 생성
Redux Usage
Redux 정리3 (wecode 멘토 손승현님 영상)
actioncreator (action 정보를 담은 객체를 return 합니다.)
-> action은 rootReducer로 가고
-> 각 reducer들에게 뿌려집니다.
-> reducer들이 action의 type을 검사한 후 원하는 변화를 주고
-> 새로운 state를 return 합니다.
-> state가 store로 이동하고
-> store에서 그 값을 보여줘야하는 component에게 값을 뿌려줍니다.
-
폴더 구조
- store 폴더 > actions 폴더 > index.js 파일
- store 폴더 > reducers 폴더 > index.js 파일
- action 생성
export const actionName = (a) => {
return {
type: 'ACTION_NAME',
payload: a,
};
};payload에 내가 지정한 type에 어떤 것을 추가할 것인지 명시합니다.
action을 호출할 때 담아서 보내는 정보 객체입니다.
action 함수가 호출이 되면 dispatch가 되는데
dispatch돼서 받아지는 곳이 reducer 입니다.
reducer에서 로직을 처리합니다.
- reducer 생성
import { combineReducer } from "redux";
const initialState = [초기값]
const reducerName = (state=initialState, action) => {
switch (action.type){
case: "ACTION_NAME"
return [...state, action.payload];
default (필수):
return state;
}
}export default combineReducer({ reducerName });- 최상위 index.js에서 사용합니다.
최상위 index.js App이 Redux를 활용해 전역상태관리가 가능하게끔 해줘야 합니다.
import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './store/reducers/index.js';
const store = createStore(rootReducer);
ReactDOM.render(
<Provider store={store}>
<App />
</Provider>,
document.getElementById('root')
);- action 발생 action을 발생시킬 component로 이동 후 작성.
import { connect } from 'react-redux';
import { actionName } from './store/actions';
const ComponentName = ({ actionName }) => {
const onClick = () => {
actionName();
};
return (
<>
<button onClick={onClick} />
</>
);
};
export default connect(null, { actionName })(ComponentName);- 위의 component에서 action을 발생시켰고 그 때마다 반응해서 나오는 새로운 상태값의 component로 이동 후 작성. (store에서 상태를 받아줘야하는 component) redux store에서 상태값을 props로 넘겨줄 때 아래처럼 작성해줘야 합니다.
import { connect } from 'react-redux';
const ComponentName = (reducerName) => {
return <></>;
};
const mapStateToProps = (state) => {
return {
reducerName: state.reducerName,
};
};
export default connect(mapStateToProps)(ComponentName);