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..
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..
