Project/기타6 비슷한 컴포넌트 재사용하기 / 아워홈 사전과제 1. Why? 아워홈 사전 과제를 진행하며, 어떻게 하면 컴포넌트의 재사용성을 높일 수 있을까 고민을 많이 했다. 다른 프로젝트를 진행하면서도 비슷한 요소의 컴포넌트를 어떻게 재사용/분리여부를 결정할지 고민했었기에, 이 기회에 정리를 해보고자 한다. 2. 도전 아래의 태그 2가지를 랜더링시켜줘야할때, 여러 방법으로 나눠보고 어떤 방법이 적절한 방법인지 생각해보자 1. 하위 컴포넌트에서 부담 ListCardTag type CardTag = 'best' | 'new'; interface ListCardTagProps { tag: CardTag; } export default function ListCardTag({ tag }: ListCardTagProps) { if (tag === 'best') { ret.. 2024. 1. 14. Context Api + Reducer로 전역상태 관리하기 / 아워홈 사전과제 1. Why? 아워홈 사전과제에서 상품 리스트의 물건을 장바구니에 담는 부분이 있었다. 이를 위해서는 전역 상태에 장바구니에 담겨있는 상품과 수량 이 필요해 보였다. 이를 사용하는 기능으로는 상품 리스트에서 버튼을 누를경우 장바구니에 담김 이미 담겨 있을 경우 수량 + 1 장바구니에서 수량을 조절할 경우 상품의 수량이 변경 정도가 있을텐데, 겨우 이 정도의 상태 관리를 위해서 전역 상태관리 라이브러리를 사용하는 것은 낭비라는 생각이 들었다. 그래서 React의 네이티브 기능인 Context Api를 통해서 장바구니 상태를 구현했다. 2. How? Context Api란? 일단 Context Api에 대해서 공식문서로 먼저 알아보자. Context Context lets a parent—even a dis.. 2024. 1. 12. 이전 1 2 다음
