본문 바로가기

프로젝트

TIL 221111- 스토어의 효능, 효험

오늘은 프론트에서 사용하고 있는 store구조 및 custom hook을 사용하고 있는 이유에 대해서 알아보자

리액트 컴포넌트에서 API요청을 하면 어떤 문제점이 일어 날까?

flux 아키텍쳐의 장점은 무엇일까? 상태를 전역에서 사용할 수 있다와 상태 관리를 UI와 분리할 수 있다는 것이 큰 장점이라고 현재 직접 체감하고 있다.

UI와 상태 관리를 분리하면 테스트하기가 쉬워진다?

Store에서는 프로그램의 핵심 로직만을 테스트하고 UI(컴포넌트)에서는 store에서 관리하는 상태를 원하는 방식으로 화면에 출력이 되는가만 확인하면 된다 진짜 UI만을 위한 테스트를할 수 있다는 게 좋은 점이 아닐까?


이런 식으로 스토어 에서 상태를 내려주면 컴포넌트에서는 진짜 스토어에 있는 상태를 출력을 올바르게 해주는 지만
확인을 하면 되게 만들 수 있다. 이렇게 되면 컴포넌트는 테스트 짜기가 쉬워진다.

저번 레벨테스트때는 컴포넌트 내부에서 스토어를 인스턴스해서 사용을 해버려서 page와 컴포넌트와의 테스트 코드의 차이가 없어져 버렸는데

page는 상태를 스토어에서 받아오거나 스토어내부의 함수를 실행하고 컴포넌트는 딱 받아온 데이터를 출력만 하는 형태로 하니 저번 레벨테스트때와는 다르게 테스트 작성이 한결 쉬워졌다.