2025.03.07 - [Programming Language/React] - [React] Design Pattern in React (1) [React] Design Pattern in React (1)리액트에서 일반적으로 자주 쓰이는 패턴이 뭐다 이렇게 정의할 정도로 아직은 깊이가 없지만,실무에서 흔히들 많이 쓴다는 패턴을 정리해보려고 한다. 다룰 패턴들은렌더 프롭스 / 훅스 / 프juniortunar.tistory.com 이전 글에 이어,이번엔 Hooks 패턴의 자주 쓰이는 용례들을 적어보고자 한다.Hooks 패턴Hooks는 React 16.8에서 도입된 기능으로, 함수형 컴포넌트에서 상태 관리와 생명주기 기능을 사용할 수 있게 해주는 패턴이다.Render Props 패턴의 많은 사용 사례를 더 ..
리액트에서 일반적으로 자주 쓰이는 패턴이 뭐다 이렇게 정의할 정도로 아직은 깊이가 없지만,실무에서 흔히들 많이 쓴다는 패턴을 정리해보려고 한다. 다룰 패턴들은렌더 프롭스 / 훅스 / 프로토타입 / 프록시 / 싱글톤 / 컴파운드로 글 하나 당 하나씩 정리해보고자 한다. 이 글은 그 첫번째 글로써 렌더 프롭스에 대해 다루고자 한다.Render Props 패턴 Render Props는 컴포넌트 간에 코드를 공유하기 위한 테크닉으로, 렌더링할 내용을 props로 전달하는 패턴이다.컴포넌트의 로직과 UI를 분리하여 재사용성을 높이고, 더 유연한 컴포넌트 설계를 가능하게 해준다.(사실 패턴이라고 지칭하는게 맞나 싶긴하다..)1. 기본 구조// 가장 기본적인 형태interface RenderProps { rende..
디자인 패턴 스터디를 진행하고 있는데,내용을 정리하고자 한다.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..
