본문 바로가기

IT217

[React] 컴포넌트 추상화 어떻게 더 추상화를 잘할 수 있을까? > 적절한 책임 부여 범용적인 컴포넌트 어떠한 도메인과 엮기지 않는 컴포넌트 도메인과 엮이면 분기 코드가 발생하여 컴포넌트 변경에 취약해진다 컴포넌트 자체가 수행하는 책임이 너무 많아 props가 증가된다면 복잡해지기에 합성으로 책임을 더 세분화 해야한다 카드의 스타일 asis > 하나의 컴포넌트에서 N개의 props tobe > 여러 컴포넌트로 세분화 카드의 형태를 동그란 모양, 사각형 모양으로 바꿀 수 있어야 한다. 썸네일 아래에 나오는 텍스트를 2줄로 보여줄지 3줄로 보여줄지 결정할 수 있어야 한다. 텍스트를 제목, 설명처럼 구분하여 보여줄 수 있어야 한다. 썸네일을 여러 개를 합쳐 보여줄 수 있어야 한다. 카드 형태의 아이템을 보여준다. 썸네일이 둥근 형태의 .. 2024. 3. 4.
[React] Controlled Props Pattern 개념 기본적인 IoC 제어 컴포넌트 패턴 컴포넌트 내부에 정의된 state 값을 변경하는 로직을 사용하지 않고, prop을 통해 외부에서 들어온 상태 값과 콜백 함수를 사용함으로써 외부에서 컴포넌틔 상태를 컨트롤할 수 있게 한다. 특징 단순한 상태 값을 가지는 컴포넌트에서는 아주 유용. 상태 값이 여러 개고 해당 값을 컨트롤 하기 위한 콜백 함수가 많아지면, 오히려 정의해야 하는 함수와 컴포넌트의 프로퍼티가 많아져서 사용성에 문제가 발생 할 수 있음 HTML 삽입 미리보기할 수 없는 소스 2024. 3. 1.
[React] Compound Pattern 개념 Context API 이용하여 여러 종류의 컴포넌트가 하나의 로직을 공유할 수 있게 하는 방법 렌더링 IoC를 실현 가능 HTML 태그인 , 도 compound pattern에 해당 사례 컴포넌트 내용은 같지만, 구성 순서를 다르게 하고 싶을 때 - positionOrder같은 prop을 추가하고 렌더링 방식을 바꾸는 방식 - Render Prop 패턴을 이용하는 방식 나중에 유사한 변경사항이 발생한다면, 위의 방식에서 로직이 추가되어 복잡도가 높아진다. 합성 컴포넌트로 구성한다면, 기존 로직을 그대로 사용할 수 있으면서 각각 구성요소별로 별개의 컴포넌트로 분리할 수 있다. 추후 UI 변경에 대해 유연하게 대응 export const Input: React.FC = function ({ value,.. 2024. 2. 28.
[React] Render Prop Pattern 개념 컴포넌트가 렌더링 함수를 프로퍼티로 전달받아 사용하는 방법 특징 동일한 렌더링 방식이 연속적으로 사용되는 컴포넌트에서 아주 유용 (리스트, 테이블 형태) 복잡한 조건의 렌더링 방식을 표현하기에 제한 render 함수가 너무 복잡해지거나 render기능을 하는 프로퍼티가 많아질 수 있음 HTML 삽입 미리보기할 수 없는 소스 상태를 부모 컴포넌트로 옮겼을 때 Render Props Pattern을 고민해보자 상태변경은 모든 자식 컴포넌트의 리렌더링을 유발하고, 이런 상황이 쌓이면 앱의 전체적인 성능을 떨어트릴 수 있다. function Input({ value, handleChange }) { return handleChange(e.target.value)} /> } export default fun.. 2024. 2. 26.
[Typescript] satisfies 배경 개발자들은 딜레마에 빠진다. 개발 하다보면 object의 맴버들이 type에 매칭되길 원할 뿐만 아니라 타입추론으로 인하여 가장 명확한 타입을 유지하기 원한다. 상황 예 const palette = { red: [255, 0, 0], green: '#00ff00', bule: [0,0, 0] //^^^^ typo } const redComponent = palette.red.at(0) const greenNormalized = palette.green.toUpperCase() 기존 시도 object에 type 선언했더니 로직에서 에러 발생 type Colors = 'red' | 'green' | 'blue' type RGB = [red: number, green: number, blue: numbe.. 2024. 2. 22.
[Typescript] 타입 호환성 Typescript의 타입 호환성 > 구조적 서브타이핑 기반 구조적 서브타이핑 > 오직 멤버만으로 타입을 관계시키는 방식 > y가 최소환 x와 동일한 멤버를 가지고 있다면, x와 y는 호환된다. > '덕 타이핑'이라고도 함 '만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를것이다' type Food = { /** 각 영양소에 대한 gram 중량값 */ protein: number; carbohydrates: number; fat: number; } type Burger = Food & { /** 햄버거 브랜드 이름 */ burgerBrand: string; } function calculateCalorie(food: Food) { return food.pro.. 2024. 2. 22.

티스토리툴바