04/07 국비학원 개발자과정 91회차수업 - Redux, CSS 로 네임카드 만들기

Redux복습

 

Redux는 React와 함께 사용되는 상태 관리 라이브러리입니다. Redux는 단방향 데이터 흐름을 따르며, 상태 변경을 예측 가능하게 만듭니다. Redux의 흐름은 다음과 같습니다.

 

1.

Action 액션은 상태를 변경하기 위한 일종의 메시지입니다. 액션은 type 필드를 가지며, 상태 변경을 위한 추가적인 데이터를 포함할 수 있습니다.

 

2.

Reducer 리듀서는 액션을 받아서 상태를 변경하는 함수입니다. 리듀서는 이전 상태와 액션을 입력으로 받고, 새로운 상태를 반환합니다. 리듀서는 순수 함수여야 하며, 동일한 입력에 대해서는 항상 동일한 출력을 반환해야 합니다.
Store 스토어는 애플리케이션의 상태를 보관하는 객체입니다. 스토어는 리듀서와 함께 생성됩니다. 액션을 디스패치하면 스토어는 현재 상태와 액션을 리듀서에게 전달하고, 리듀서가 반환한 새로운 상태를 스토어에 저장합니다.

 

3.View 뷰는 사용자에게 보여지는 UI입니다. 뷰는 스토어에서 상태를 읽고, 상태에 따라 UI를 업데이트합니다. 뷰는 액션을 디스패치할 수도 있으며, 액션을 디스패치하면 스토어에서 상태를 업데이트하고, 뷰는 이를 감지하여 UI를 다시 그립니다.

 

Redux의 흐름은 단방향 데이터 흐름을 따르므로, 상태의 변경을 예측 가능하게 만듭니다. 또한, Redux는 애플리케이션의 상태를 중앙에서 관리하기 때문에, 여러 컴포넌트 간에 상태를 공유하기가 쉽습니다.

이미지 출처 : https://velog.io/@annahyr/%EB%A6%AC%EB%8D%95%EC%8A%A4-%ED%9D%90%EB%A6%84-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0

리덕스 흐름 이해하기

 

객체리터럴에 접근하기

1,2,3의 정보가 담긴 객체 리터럴이 있다. 

여기의 키값 1,2,3에 대응하는 밸류값이 map이다.

 

안의 밸류값을 가져올때는 

{

        Object.keys(cards).map((key)=>(/* 맵은 소괄호 */

        //depth가 있으면 저런 패턴으로 꺼내야할 수도 있다~! 객체 리터럴인데 라벨이 있는 경우 -> 객체를 감싸고 있는 게 대괄호가 아니고 중괄호임

          <Card key={key} card={cards[key]}/>

        ))

      }

이렇게 꺼내온다.

카드에서 구조분해 할당으로 theme값만 가져온다.

CSS를 모듈화 해서 사용하였다.

https://arnopark.tistory.com/628

[React] 12. CSS 모듈 사용하기

 

로그인할때 Redux를 사용함