0729 Redux

# 0728

 

[login.jsx]

# {...userid}  {...userpw} 다시 설명

인자값 defaultValue는 꼭 defaultValue로 써야하는게아니라 아무렇게나 써도 되는거죠? 

- 넵! 그냥 aaa로 써도 됨

 

# hooks폴더에 custum hook 분리

 

# 하나의 파일에는 하나의 기능

- 스크롤의 느낌이 너무 많이 내려간다 싶으면? - 100줄 이상이면 나누는 편이 좋다.

 

[join.jsx]

복습!

 

* 웹 접근성

label

img alt

input title

# Accordion 분리

[NavToggle.jsx] 에 있던 Accordion 을 따로 뼀다

[Accordion.jsx]

하고 porps 값을 따로 보내주었다.

 

* css를 export 뒤에 써도 되나요? - 가능~ 

# [post].jsx 

값 받아오기

 

# redux 설치 

npm install next-redux-wrapper          // Store 개념 NEXT SSR(server side rendering)에 대한 처리를 해주는 패키지 - redux를 Next에 맞게 설정해줌

npm install redux                       // redux에 관련된 것들.. Store middleware combine

npm install react-redux                 // redux랑 react랑 같이 쓸 때 사용 (redux는 저장만하는 아이) - 컴포넌트에서 저장소에 있는 내용을 가져올때 사용한다

npm install redux-devtools-extension    // react와 달리 dev tools 설치를 해야 사용가능함.

# Redux and Context

데이터 중앙관리를 해주는 녀석들

 

게시글 리스트 - 중앙관리에 넣어서 관리를 하는게 좋다

 

화면에서 뿌릴 데이터(JSON)들을 받는 공간을 Store

JSON 목록을 한 파일에다가 다 저장해놓는것이다.

 

useReducer 랑 거의 흡사하다.

 

state 와 dispatch 와 reducer 의 관계를 이해하는게 어렵다.

 

우리가 만들었던 reducer 파일..

우리는 Comment 만 만들었을 뿐인데 

 

redux 에 있는 combine 이라는 애들 사용,

 

[폴더구조]

pages

component

hooks

store       -> redux 설정값 정도만 받는다.

reducers     라는 폴더가 하나 더 생긴다. - 양이 엄청나게 많음

리덕스에서는

reducer에서 초기 state 값을 설정하는것을 주의하자

--------------------------------------------

 

Context 랑 Redux랑 뭐가 다르냐?

redux 가 먼저 나오긴함

 

[redux의장점] 

- 디버깅이 쉬움 

- redux dev tool 이라는게 있기 때문!

- 불변성 상태변과정

- 비동기통신 데이터 관리

- 안정성이 좋다!

[redux의단점]

- 코드 생산성이 나쁘다 : 일일히 다 작업을 해줘야한다 - 손이 좀 더 간다.

 

JAVA 도 동일한 장단점을 가진다.

+ 코드관리하기 쉬움

-----------------------------------------------------------------

 

1. store/ configureStore.js 파일 생성

2. reducers/ index.js 파일 생성

---

 

0729

 

# redux 설치 

npm install next-redux-wrapper          

npm install redux                       

npm install react-redux                 

npm install redux-devtools-extension

 

다 설치가 되어있는지 확인해보자

 

1. store / configureStore.js

데이터와 관련된거는 js

컴포넌트는 jsx

 

기본적으로 export default wrapper

 

const wrapper = createWrapper(configureStore,{})

첫번째 인자값은 redux의 Store => const Store = createContext(initalState)

두번째

 

const configureStore = ()=>{

    // context -> createContext

    // const store = createContext(initalState)

    // 초기값은 reducer에있다.

    const Store = createStore(reducer)

}

2. reducers / index.js

reducer 작성

 

const Store = createStore(reducer)

여기 안에 들어가는 reducer를 넣기 위해 index에서 reducer를 작성한다.

3. _app.jsx

 

import wrapper from '../store/configureStore'

export default wrapper.withRedux(App)

4. login.jsx

import {useDispatch} from 'react-redux'

 

const Login = () => {

    const dispatch = useDispatch()

 

    dispatch({type : 'USER_LOGIN'})

 

이렇게 하고 로그인 페이지 갔을때 

case USER_LOGIN:

    console.log('로그인 신호 왔다');

이게 찍히는지 확인해보자

 

---------------------------------

[추가설명]

# configureStore.js

-> [context.jsx] 와 같은 의미

    createContext 부분.

    그래서 Store 의 결과 값이 Store는 컴포넌트이다.

    Store : 초기값을 저장하고 내보내주는 녀석이다.

-> context.jsx 는 초기 상태값을 저장한 컴포넌트를 만드는 파일이다.

 

-> [configureStore.js]

1. const wrapper = createWrapper(configureStore)

 

createSotre (reducer)=== createContext (상태초기값)

            reducer 안에 상태초기값을 가지고 있다.

Store 라는 변수 안에 상태 초기값을 가지고 있다.

그래서 [configureStore] 는 Store 를 가지고 있는 함수표현식에 대한 함수이다

 

그러면 wrapper는 뭐냐?

context를 만들고 사용할 곳에서 import Store 를 해왔다. 그런 다음에 쓸때는 Store.Provider를 썼는데

이걸 대체해서 나온게 wrapper 이다.(Provider 의 내용을 담고 있음)

이 wrapper를 쓸때는 import wrapper 해오고

export default wrapper.withRedux(App) 로 다 쓸 수 있게끔한다.

 

[reducers/index.js]

return default 가 else 구문이라고 생각하면 된다.

그래서 시작할때 아무 action 값이 없으면 거쳐가게 되고

무조건 있어야 에러가 나지 않는다.

 

------------------------

context 에서 만든 islogin 값과

redux로 만든 isLogin 값은 다른거다.

그래서 서로 다른 값을 바라보고 있으면 로그인 로그아웃이 제대로 진행되지 않는다.

그래서 로그아웃도 redux에 있는 isLogin 으로 바꿔줘야 한다.

 

1. reducer를 만들어준다. - 상태값을 받은 적이 없다면 초기값을 넣어준다

const reducer = (state = initalState, action) => {

    switch (action.type) {

        case USER_LOGIN:

            //console.log('로그인 신호 왔다');

            return {

                ...state,   // initalState의 내용을 다 복사한거임

                user: {

                    ...state.user,      // 왜 또 복사하냐? - 큰 테두리만 복사 - 안에 값 참조만..

                    IsLogin: true

                },

            }

        case USER_LOGOUT:

            return {

                ...state,

                user: {

                    ...state.user,

                    IsLogin: false

                },

            }

        default:

            return state

    }

}

고침

 

# state 파일별로 나눔

 

# redux middleware 사용할 수 있는 설정하고 devtools 사용까지

 

[configureStore.js] 에서

dev tool 설정

 

미들웨어 역할은 reducer(action) 랑 state를 이어주는 중간다리 역할을 해주는 녀석이다.

 

훔쳐오는거...? - 미들웨어가

 

reducer에서 action 값이 미들웨어를 통해서만 state로 갈 수 있는...