IM 43일차

Gong Intaek·2021년 4월 5일

IM코스 leetcode redux

코드스테이츠

목록 보기

81/151

TIL

Redux

자바스크립트 앱을 위한 예측 가능한 상태 컨테이너

필요성

리액트를 사용할 경우 주어진 정보들은 가장 상위 컴포넌트에서 하위컴포넌트 형태로 전달된다.
그리고 하위 컴포넌트에서 일어난 이벤트에 대한 변화를 앱에 적용하기 위해 우리는 state 끌어올리기라는 방법을 사용한다.

하지만 이러한 방식이 아주 많고 깊게 퍼지는 컴포넌트들을 바탕으로 이루어진다면 우리는 정보를 옮기기위해 깊고 많은 컴포넌트 사이들을 실로 천을 만들듯 이리저리 꿰메어서 구성을 해야만한다. 그리고 이러한 과정은 그리 직관적이 아닐수도 있고 직관적이라 하더라도 그구조과 가히 보기 좋은 것은 아닐것이다.

여러 요소를 거쳐 전달되는 정보의 전달 패턴을 보다보면 전역 변수에서 변수 선언하고 하위 스코프에서 받아쓰는 것처럼 어떤 공통된 정보 저장소로부터 필요한 곳에서 바로 정보를 받아오거나 정보를 넘기는 구조를 그리게 된다. 그리고 Redux는 그러한 방식을 충족한다.

redux 예제

redux 에서 주어지는 기본 예제 ( 참조 )

import { createStore } from 'redux'
/**
 * 이것이 (state, action) => state 형태의 순수 함수인 리듀서입니다.
 * 리듀서는 액션이 어떻게 상태를 다음 상태로 변경하는지 서술합니다.
 *
 * 상태의 모양은 당신 마음대로입니다: 기본형(primitive)일수도, 배열일수도, 객체일수도,
 * 심지어 Immutable.js 자료구조일수도 있습니다.  오직 중요한 점은 상태 객체를 변경해서는 안되며,
 * 상태가 바뀐다면 새로운 객체를 반환해야 한다는 것입니다.
 *
 * 이 예제에서 우리는 `switch` 구문과 문자열을 썼지만,
 * 여러분의 프로젝트에 맞게
 * (함수 맵 같은) 다른 컨벤션을 따르셔도 좋습니다.
 */
function counter(state = 0, action) {
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

// 앱의 상태를 보관하는 Redux 저장소를 만듭니다.
// API로는 { subscribe, dispatch, getState }가 있습니다.
let store = createStore(counter)

// subscribe()를 이용해 상태 변화에 따라 UI가 변경되게 할 수 있습니다.
// 보통은 subscribe()를 직접 사용하기보다는 뷰 바인딩 라이브러리(예를 들어 React Redux)를 사용합니다.
// 하지만 현재 상태를 localStorage에 영속적으로 저장할 때도 편리합니다.

store.subscribe(() => console.log(store.getState())))

// 내부 상태를 변경하는 유일한 방법은 액션을 보내는 것뿐입니다.
// 액션은 직렬화할수도, 로깅할수도, 저장할수도 있으며 나중에 재실행할수도 있습니다.
store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

store : 공통된 하나의 저장소를 말하고 이를 바탕으로 정보의 전달이 이루어진다. (subscribe, dispatch, getState를 가짐) => 자세한 설명은 여기로

let store = createStore(counter)

action : 아래의 형태를 가지는 정보 변경 수행자.

function counter(state = 0, action) {
  // 내부구조는 자료 변경 형시겡따라 변경될 것이다.
  // 명심할 것은 state 형태의 순수 함수인 리듀서라는 것이다. 
  switch (action.type) {
    case 'INCREMENT':
      return state + 1
    case 'DECREMENT':
      return state - 1
    default:
      return state
  }
}

getState : 저장소의 정보를 돌려준다.
subscribe : 현재 상태들을 앱에 반영

store.subscribe(() => console.log(store.getState())))

dispatch : 정보 변경을 수행할 정보를 보낸다.

store.dispatch({ type: 'INCREMENT' })
// 1
store.dispatch({ type: 'INCREMENT' })
// 2
store.dispatch({ type: 'DECREMENT' })
// 1

오늘 한 일

redux 배우고 스프린트 해봄
leetcode
- Goat Latin (easy)
- Number Complement (easy)
- Design HashSet (easy)

To Do

scss 도 활용을 생각해보면 좋을것 같다.
typescript 공부 예제를 생각해보자
vue, angular 공부 해보자

오늘은...

오늘은 redux에 대한 공부와 그에 대한 스프린트를 진행하였다. 대략적인 이야기는 이해한것 같았으나 실제 사용에서는 조금 많이 버벅였다. 그래도 스프린트를 풀어내는데는 생각이상으로 적은 시간내에 완수 할수 있었다. 하지만 아침에 진행하고 있는 토이문제 풀이는 그리 수월하지 않았다. 결과까지 만드는데 걸리는 최소 수행 횟수를 구하는 부분이 아직은 미흡한것 같다. 좀더 차분히 생각하면 풀어보고자 한다.

Gong Intaek

개발자가 되기위해 공부중

이전 포스트

IM 42일차

다음 포스트