[8주차] 리액트: CRA 부터 ~리덕스 초기설정까지

스탠다드 1124

 

CRA

 

Router.jsx

src>shared>Router.js 생성

import {BrowserRouter, Routes, Router } from...
import Detail from ...
import Home from ...

const Router = () => {

return(
    <BrowserRouter>
        <Router>
            <Route path="/" element={<Home />} />
            <Route path="/:id" element={<Detail />} />
        </Router>
    </BrowserRouter>
);
}

export default Router

 

 

index.js

*redux는 전체 영역 뿐만 아니라 지역적으로도 사용이 가능하다 (Provider로 부분적으로 감싸서 가능하다)

*redux도 내부에 contextAPI를 포함한다.

 

configStore.js

*store는 reducer 여러개를 combineReducer 메소드를 이요해 모두 모은 rootReducer를 createStore라는 메소드를 이용해 만든 store 이다.

 

Home.jsx

*디자인 먼저 하기(return부분)

*one depth 정도는 Props로 사용해 데이터를 내려줘도 괜찮다.

*Llist 부분

• isDone이라는 state 값을 하나 만들어 삼항연산자를 통해 제목을 뿌려준다(조건부랜더링)

*Form 부분에서 label을 사용하면, label 를 눌러도 인풋에 포커싱이 된다.

 

todos.js

*리듀서는 state와 action이 인자로 들어간다.

*action은 type과 payload를 가지고 있다.

*useSelector에 인자로 들어가는 콜백함수의 인자는 {todos: arrr}가 나옴. 전체 리듀서의 모음 객체. 따라서 

const a = useSelector(function(i){return i.todos;})
// 그러면 전체 리듀서 모음인 객체에서 todos리듀서만 쏙 뺴낼 수 있다.

 

아래도 같은 식이다.

const {todos} = useSelector((state)=>state);

 

결국

const a = useSelector(function(state){return state.todos;})

 

로 표현하게 된다. 위 작업을 putSubscribe 이라고 표현한다. 

 

Form.jsx

*추가버튼 로직에서 e.preventDefault 후에 store로 보내줘야 한다.

*그럴러면

• import dispatch
• const dispatch = useDispatch();

 

todos.js

payload 는 

{
	id : "".
    title: ",
    body: "",

}

 

그럼 아까 추가 로직에서

dispattch(액션객체가 인자로 들어감) **액션에는 type과 payload가 들어있음