vue best practice

vue best practice

리덕스를 사용하고 있는 어플리케이션에서 모든 상태관리를 리덕스를 통해 해야 할까? 아니면 적절하게 어떤건 리덕스에, 어떤건 컴포넌트에 저장해놓고 사용하면 될까? 적절하게의 기준은 뭘까? 리덕스 툴킷 공식 홈페이지에서 제시한 리덕스 아키텍처 best practice에 관련해서 알아보고자 합니다. 리액트에서 state는 두 가지 성격으로 나눌 수 있는데, 전역 state와 로컬 state로 나뉜다고 볼 수 있어요. 리덕스는 전역 state상태 관리를 도와주는 툴로 가장 대중적으로 사용되는 라이브러리다.

그리고 리덕스 툴킷은 기존에 리덕스를 작성하기 위해 요구되었던 불편함들을 해소하고 리덕스를 작성하는 표준 방법을 제공하기 위해 제작된 라이브러리다. 리덕스보다. 사용이 간편하고 보일러플레이트도 더 적다는 혜택이 있습니다.

로컬 state를 사용할 때의 자주보이는 문제점

어플리케이션의 다른 부분에 자리한 여러 컴포넌트가 동일한 stateex 유저정보를 공유하고 사용해야 할 때, 특히 그러한 state 요소가 다른 부분에 위치할 때 문제가 발생합니다. 아래 이미지를 보시면 Home컴포넌트가 User data와 Layout data를 갖고 있습니다. 그러나 Profile컴포넌트도 User data가 필요한 상황입니다. 하지만 두 컴포넌트는 평행하게 놓여있어 state를 물려줄 수 있는 구조가 아닙니다.

이것을 리덕스를 사용하여 개선하면 아래와 같은 flow가 됩니다.

Form 데이터는 컴포넌트 레벨에서 관리해야

하지만 form데이터의 경우 대략 로컬 state로 관리하는 것이 좋습니다. 사용자가 데이터를 수정하는 동안 폼 컴포넌트 내에서 데이터를 유지하고, 사용자가 처리를 마치면 form을 submit하면 그 때 리덕스 액션을 디스패치하여 전역 state를 최신 정보를 갱신하는 것이 좋습니다. 그리하여 form이 submit되고 난 후 사용자에게 보여줘야 할 새로운 데이터를 업데이트해주는 것입니다.

즉 리덕스는 앱의 전역 상황을 관리하기 위해 사용되며, 대부분의 경우 폼 데이터와 같은 지역적인 상태는 컴포넌트 내에서 관리하고, 필요할 때 리덕스 스토어로 업데이트 합니다. 이렇게 하면 상태 관리가 더 단순해지고 추정 가능해진다.

AWS Control Tower

Automates Accounts Deployment. 비유하자면 AWS Account Vending Machine. AWS Service Catalog는 runs within one account. AWS Control Tower는 account creation deploy Service Catalog 그 외 account에 필요한 것들을 account 생성 시점에 세팅.

Landing Zone을 설정하면, new account가 생성될 때 자동으로 실행할 CloudFormation을 지정할 수 있어요.

Manual setting이 필요 없도록 전부 자동화하는 것. 계정의 접근 권한이나 설정을 Standardize할 수 있어요.

AWS Service Catalog

비유하자면 일종의 AWS Resource Vending Machines. 다시, 위의 Dev Environment를 예시로 들면 create manage perapproved portfolios products 담당. portfolio admin은 CloudFormation template으로 AWS Resource provisioning을 요청할 수 있어요.

이걸 Catalog에서는 product라고 부른다.

Portfolio에는 Product가 포함될 수 있어요. users can browse the portfolios, and launch products on their accounts. Dev Environment 라는 Portfolio를 정의합니다.

Dashboard UI향상에 좋은 redux

대시보드처럼 여러가지 수치 데이터를 그래프에 뿌려줘야 하는 경우에 리덕스를 사용하면 좋습니다. 특히 데이터가 자주 fetch되어야 한다면 말입니다. 아래를 보시면 대시보드페이지가 5초마다. 데이터를 fetch한 후 setState함수를 통해 데이터를 업데이트해주고, 이 데이터를 자식 컴포넌트인 그래프 1~4컴포넌트에 물려주고 있습니다. 자식 그래프 컴포넌트들은 부모에게 받은 데이터를 그래프로 그리고 있습니다.

여기서 문제점은 setState가 일어날 때 부모 컴포넌트에서 UI리렌더링이 일어난다는 것입니다. 자식 컴포넌트는 부모 컴포넌트가 리랜더링 될 때 함께 리랜더링이 됩니다. 원치않는 깜빡임이 일어날 수 있는 부분입니다.

자주 묻는 질문