생초짜의 Redux 사용법

이 글은 제 생각을 명확히 하기 위해 작성되었습니다.

쉬운 목차

왜 Redux를 사용해야 하나요?

반응하다많은 부품을 사용할 때 한쪽은 사용하지만 다른 부품은 상태넘기기 소품부모로부터 하나씩 전수받아야 하는데 단축코드의 경우 큰 문제는 없으나 깊이가 길수록 번거롭고 상태관리가 혼란스러워진다. 또한 반응하다 같은 경우 단방향 데이터 바인딩으로 인해 하위 구성 요소에서 상위 구성 요소로 데이터를 전달하기 어렵기 때문에 이러한 문제를 해결하기 위해 라이브러리를 사용합니다. 줄이기 위해 도서관 오전.

더 명확하게 하기 위해

Root에서 Left3로 상태 값을 전달하기 위해 위 이미지와 같이 라이프코딩 유튜브를 시청하면서 작성했습니다.

Root -> Left1 -> Left2 -> Left3

다음 과정을 통해 소품내려가야 하는데 엄청 불편해요!!

이를 해결하기 위한 국가행정도서관은 줄이기 위해 옆에 반동, Mobx 등 여러가지가 있지만 가장 기본적인

Redux를 먼저 배워보자

Redux의 3가지 원칙

1. 진실의 단일 소스

– 모든 신청 상태는 한 곳에서 중앙 집중식으로 관리됩니다.

2. 상태는 읽기 전용입니다.

– 상태는 읽기 전용 데이터이며 작업만 상태 교체를 요청할 수 있습니다.

3. 순수함수로 변경

– 상태의 최종 값만 감속기(함수)를 통해 설정됩니다.

리덕스 아키텍처

redux의 아키텍처는 다음과 같습니다. 코드를 작성할 때 이미지를 참고하여 이를 이해하는데 많은 도움이 되었습니다.

* 컴퓨터에 저장

* 상태

* 행동

* 감속기

* 구독

* 보기(구성 요소)

사실 위와 같이 사용 원리에 대한 지식이 어느 정도 있으면 이해하기 쉬울 것 같아서 정리했는데, 직접 해보시고 console.log 를 가져가시면 훨씬 이해가 빠를 거예요!

사용하는 방법

먼저 Redux 라이브러리를 설치합니다.

npm i redux

import { createStore} from 'redux'

const initData = {
	number:1,
}; // store내 state의 초기 값을 설정해준다.

function reducer(state = initData, action) {
  switch (action.type) {
    case 'increase':
      return {...state, number: state.number + 1};

    default:
      return state;
  }
} // reducer 함수이며 action의 type 값이 'increase' 일 경우 number 1증가, 그밖의 경우에는 기존 state 값을 리턴한다.

const store = createStore(reducer) // Redux 스토어를 생성하고 reducer 함수를 전달받는다. 생성된 store는 .getState(), .dispatch(), .subscribe() 메서드를 제공한다.

<button onClick = {()=>{
	store.dispatch({type:'increase'}); // dispatch안에는 action객체가 들어간다. 데이터를 실어 넣고 싶은 경우에는 action객체 안에 payload를 넣어주면 된다.
}
}>증가버튼</button>

Redux를 사용해 보기 위해 키를 눌렀을 때 스토어의 상태 값을 1씩 증가시키는 코드를 임시로 작성했습니다(물론 복사 및 붙여넣기는 작동하지 않음).

먼저 리듀서 함수를 작성하고 redux 스토어를 생성한 다음 리듀서 함수를 주입합니다. 그래서 가게가 생기자마자!

이제 reducer 함수의 초기값을 설정하고 그 안에 switch ~case 문을 사용하여 조건문을 action.type으로 설정합니다. (if를 써도 되지만, 저는 학습하면서 switch 문을 가장 많이 사용하는 것을 발견했습니다.)

초기 데이터 설정 후 console.log(store.getState()) 아마도 초기 값을 줄 것입니다. 하지만 이 상황에 대처할 수 있으려면 이 상황에 대처해야 합니다. 배송() 방법. 배송() 방법은 쉽게 말해서 행동활성화 시키려는 의도라고 볼 수 있지만 위와 같이 onClick으로 버튼에 action 객체를 삽입하여 실행하면 action type이 ‘increase’이므로 반환값이 반환됩니다. (지시) 복사하여 반환합니다.

그러면 다음과 같이 console.log의 숫자가 계속 증가하는 것을 볼 수 있습니다.

검토

Redux를 공부하고 배운 것을 정리하기 위해 글을 쓰게 되었는데 너무 많이 쓴 것 같습니다. Redux를 더 잘 이해했다면 더 간단하고 명확하게 텍스트를 설명하고 설명할 수 있었을 것입니다. !