오늘은

9시 기상,게더입장

TIL

• 로그인을 하면 헤더 컴포넌트가 바뀌므로 므로 헤더 컴포넌트를 분기해준다.

• Header컴포넌트에서 로그인을 했을때의 헤더와 로그인을 하지않은 상태의 헤더 2가지가 필요하기때문에
  useEffect를 사용하여 getCookie로 데이터를 가져와 cookie변수에 담아주었고
  if else 문을 사용하여 cookie가 있을 경우에는 true를 없을 경우에 false 값을 넣어줬다.
  쿠키만 넣어줬다해서 컴포넌트가 랜더링되지 않으므로
  로그아웃 버튼에 onclick함수를 넣어 deletecookie를 넣어서 버튼을 누를시 false 값으로 다시 들어가도록 하였다.

• immer 불변성 관리

• redux-actions 더 편하게 액션관리

• 로그인 유저 모듈
  redux=>user.js
  modules=>configureStore.js(modules폴더는 redux폴더 안에 만듦)

• 순서
  user.js에서 필요한 것 import해주기
  actions 만들기
  action cerators만들기
  reducer 만들기
  => store로 묶어주기

• createAction 사용 전

const logIn = (user) =>{
     return{
         type: LOG_IN,
         user
     }
}

• createAction 사용

const logIn = createAction(LOG_IN,(user)=>({user}));

• handleAction 사용 전

const reducer = (state={}, action={})=>{
     switch(action.type){
         case "LOG_IN" : {
             state.user = action.user;
         }
     }
 }

• handleActions사용

const reducer = handleAction({
    [LOG_IN]: (state,action)=>{

    },
    
},{})

• 리덕스와 컴포넌트 연결하기
  스토어를 주입할때 Provider을 쓴다. Provider를 index.js에서 주입한다.
  App.js에서 원래 BrowserRouter와 Route를 써서 컴포넌트에 주입하던 history를
  ConnectedRouter를 써서 리덕스랑 같은 history를 사용하도록 해준다.(history를 공유하기위해)