리액트에서 일반적으로 자주 쓰이는 패턴이 뭐다 이렇게 정의할 정도로 아직은 깊이가 없지만,실무에서 흔히들 많이 쓴다는 패턴을 정리해보려고 한다. 다룰 패턴들은렌더 프롭스 / 훅스 / 프로토타입 / 프록시 / 싱글톤 / 컴파운드로 글 하나 당 하나씩 정리해보고자 한다. 이 글은 그 첫번째 글로써 렌더 프롭스에 대해 다루고자 한다.Render Props 패턴 Render Props는 컴포넌트 간에 코드를 공유하기 위한 테크닉으로, 렌더링할 내용을 props로 전달하는 패턴이다.컴포넌트의 로직과 UI를 분리하여 재사용성을 높이고, 더 유연한 컴포넌트 설계를 가능하게 해준다.(사실 패턴이라고 지칭하는게 맞나 싶긴하다..)1. 기본 구조// 가장 기본적인 형태interface RenderProps { rende..
this를 포함한 property를 구조분해할당하면this가 가리키는 객체가 다를 것이라는 것은 머릿 속으로는 알고 있었는데,정리해보려고 남겨보는 글이다.this를 포함한 구조 분해 할당의 문제와 해결 방법구조 분해 할당은 객체나 배열에서 원하는 속성 또는 값을 추출해 별도의 변수로 할당하는 방식이다.코드의 간결성과 가독성을 높이는데 자주 사용된다.예시: 단순 속성 구조 분해this를 사용하지 않는 경우, 구조 분해 할당은 아무 문제 없이 동작한다.함수형 예제const obj = { a: 1, b: 2, c: 3 };const { a, b } = obj;console.log(a, b); // 출력: 1, 2클래스 예제 (this 제외)class MyClass { constructor() { thi..
디자인 패턴 스터디를 진행하고 있는데,내용을 정리하고자 한다.MVC 패턴정의MVC는 애플리케이션을 세 가지 주요 컴포넌트로 분리하는 아키텍처 패턴Model: 데이터와 비즈니스 로직View: 사용자 인터페이스(UI)Controller: Model과 View 사이의 상호작용 관리특징관심사의 분리Model: 데이터 처리View: 사용자 인터페이스Controller: 로직 처리 및 조정데이터 흐름 User → Controller → Model → View → User각 컴포넌트 책임Model // 데이터 구조와 비즈니스 로직 class PhotoModel { private photos: Photo[] = []; async fetchPhotos() { this.photos = await api.ge..
