TIL 21.06.04

Jaemin Jung·2021년 6월 7일

Today I Learned

목록 보기

35/62

오늘 한 일

Redux의 개념을 알게되었고, 그전에 여러 컴포넌트에서 사용되는 상태를 props를 통해 핸들링하는 연습을 하였다. 확실히 지금 과제도 실무에 비하면 10배 이상은 간단한 구조일텐데도 상태를 컨트롤하는데 복잡함을 많이 느꼈고, Redux를 이용하면 많이 편리하겠다는 생각이 들었다.

Achievement goals

상태 관리 라이브러리가 왜 필요한지 이해할 수 있다.
Redux (혹은 Flux Pattern)에서 사용하는 Action, Reducer 그리고 Store의 의미와 특징을 이해할 수 있다.
Redux의 3가지 원칙이 무엇이며, 주요 개념과 어떻게 연결되는지 이해할 수 있다.

Redux

Redux는 애플리케이션에서 상태를 효율적으로 관리할 수 있게 도와주는 라이브러리이다.
기존에 배웠던 React에서 useState로도 상태를 관리할 수 있지만,
Redux는 훨씬 복잡한 구조에서 상태 관리에 특히 유용하게 사용된다.
Redux는 React에서만이 아니라 jQuery, Angular, JavaScript등에서도 사용 가능하다.

Redux를 사용해야하는 이유

이미지 출처 : http://www.liberaldictionary.com/redux/

React는 컴포넌트 기반으로 계층화, 구조화하는 개발 라이브러리이다.
React의 데이터 흐름은 단방향이기 때문에, 자식 컴포넌트가 부모 컴포넌트의 상태에 의존한다면,
부모 컴포넌트에서 자식 컴포넌트로 상태를 넘겨준다.(props를 이용하여)

이때, root컴포넌트의 상태에 대해서 최하위 자식컴포넌트가 의존한다면,
root컴포넌트에서 해당 위치까지 수많은 props 전달을 해야할것이고,
웹 애플리케이션이 훨씬 복잡해지고 많은 계층구조가 생기면 이 과정은 매우 복잡할것이다.(리프팅 스테이트 업)

Redux는 store라는 상태 저장소를 이용하여 상태가 필요한 해당 컴포넌트에서
바로 상태에 접근하도록 도와주기에 이러한 문제를 해결해준다.

Redux의장점
1. 상태를 예측 가능하게 만들어준다.
2. 유지보수가 편리하다.
3. 디버깅에 유리하다
4. 테스트를 붙이기 쉽다.

Redux 세가지 원칙

Single source of truth

동일한 데이터는 항상 같은곳에서 데이터를 가져온다.
(데이터를 저장하는 store라는 하나의 공간이 있다.)

State is read-only

상태는 읽기 전용이라서, Action이라는 객체를 통해서 상태를 변경가능하다.

Changes are made with pure functions

상태 변경은 순수함수로만 가능하다.

Store

Store는 상태가 관리되는 오직 하나의 공간을 말한다.
앱에서 상태를 넣고 다른 컴포넌트에서 스토어에서 상태를 꺼내쓴다.

Action

상태의 변화가 필요할때 사용한다. 자바스크립트의 객체 타입을 비롯한 다양한 데이터가 담긴다. Action 객체는 Store에 앱 데이터를 운반해주는 역할을 한다.

{ 
	type: "OREDER"//꼭 지정해야함
	drink: {
    	menu: "아메리카노"
        size: "Grande말입니다."
        얼죽아: true
    }
}

Reducer

Reducer는 변화를 일으키는 함수이다. (이전 상태와 Action을 전달인자로 받는다.)
Action을 통해 상태를 Store에 전달할때 Reducer를 꼭 거쳐야한다.
Action 객체는 Dispatch에게 전달되고 Dispatch는 Reducer를 호출해서 새로운 상태 생성 - 중요
액션의 타입에 따라서 Reducer가 달리 작동한다.