본 글은 하단의 링크의 글들을 공부하며 필사한 글임.Container/Presentational Pattern?리액트에서 관심사의 분리를 강제하는 방법으로 해당 패턴을 사용해, 비즈니스 로직과 뷰를 분리해낼 수 있다. 관심사 분리를 위해 두 컴포넌트로 분리한다.1. Presentational Components : 데이터가 어떻게 사용자한테 보여질 지에 대해 다루는 컴포넌트(렌더링)- 뷰의 역할 2. Container Components : 어떤 데이터가 보여질지를 다루는 컴포넌트- 비즈니스 로직의 역할 Presentational Components Presentational Component의 경우 props를 통해 데이터를 받으며 받은 데이터를 화면에 표현하는 것이 목적이며 데이터를 건드리지 않..
코딩/디자인 패턴
본 글은 하단의 링크의 글들을 공부하며 필사한 글임. 여러 컴포넌트로 쪼개서 개발을 하다 보면 상위 컴포넌트에서 쓰이는 데이터를 하위 컴포넌트로 전달해야 할 일이 생긴다.보통이라면 props를 통해 전달해야겠지만 컴포넌트 간의 거리가 멀어질 수록 이 방법은 번거롭고 비용이 발생한다. 추가로 리팩토링 또한 어려워진다.데이터를 필요로 하지 않는 컴포넌트들은 제외하고 데이터를 필요로 하는 컴포넌트가 데이터에 접근할 수 있는 방법이 필요하다.Provider패턴을 통해 위와 같은 방법을 구현할 수 있다.Provider1. 가장 먼저 모든 컴포넌트를 Provider로 감싼다. data를 필요로 하는 최상위 컴포넌트를 감싸면 된다. Provider는 Context객체를 제공하고, 리액트에서 제공하는 createCon..
본 글은 하단의 링크의 글들을 공부하며 필사한 글임. Proxy 객체란?프록시 객체는 특정 객체와의 인터렉션을 조금 더 용이하게 컨트롤 할 수 있게 도와준다.마치 은행계좌와 신용카드, 현금이 있는경우 신용카드는 현금의 프록시로 작용한다.결제라는 같은 인터페이스를 구현하며, 소비자는 현금을 잃어버리거나 일일이 관리하지도 않아되는 편리함이 존재합니다.ex) 특정 객체의 값을 설정하거나 값을 조회할 때 등의 인터렉션을 직접 제어할 수 있다. 여기서 프록시(proxy)란 무언가의 대리인으로, JS에서도 해당객체를 다루는 것이 아닌 Proxy 객체와 인터렉션하게 된다.const student = { name: "minkyu", age: 25, major: "computer",};const studentPro..
본 글은 하단의 링크의 글들을 공부하며 필사한 글임. 디자인 패턴 : 소프트웨어 디자인 과정에서 자주 발생하는 문제들에 대한 일반적인 해결책들임.이를 통해 반복적으로 되풀이되는 디자인 문제들을 해결하기 위해 맞춤화할 수 방법들임.하지만, 디자인 패턴은 라이브러리나 함수들을 코드에 복사해 재사용하는 것처럼 사용할 수 없음.패턴은 재사용하는 코드조각이 아닌 특정 문제에 대해 설계 시, 올바른 설계를 빠르고 올바르게 만들 수 있도록 도와주는 일종의 해결책임.디자인 패턴의 카테고리 생성 패턴(Creational Pattern), 구조 패턴(Structural Pattern), 행동 패턴(Behavioral Pattern) 생성 패턴 : 이러한 패턴들은 기존 코드의 유연성과 재사용을 증가시키는 다양한 객체 생성..
