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..
리액트의 전역상태관리 도구들에 대해 claude에게 대화를 나눠서 얻은 글이다.리액트의 전역상태관리 도구, 어떤 것을 선택할까?들어가며React 애플리케이션 개발시 전역 상태 관리의 필요성을 마주치게 된다.React의 기본 제공되는 Context API부터 다양한 서드파티 라이브러리까지, 각각의 도구들은 저마다의 특징과 장단점을 가지고 있다.React의 기본 제공 도구: Context APIContext API의 특징React의 기본 제공되는 Context API는 간단한 전역 상태 관리에 적합하다.// Context 생성const ThemeContext = React.createContext(null);// Provider 구현const ThemeProvider = ({ children }) => { ..
조건부 스타일 vs 조건부 클래스웹 개발에서 스타일링을 적용하는 방법은 다양한데, 그 중에서도 조건부 스타일과 조건부 클래스는 자주 사용되는 두 가지 접근 방식이다. 이 글에서는 두 방법의 특징과 비교를 해보려 한다.조건부 스타일조건부 스타일은 특정 조건에 따라 인라인 스타일을 적용하는 방식으로,주로 React와 같은 프레임워크에서 사용되며, 동적으로 스타일을 변경할 수 있는 장점이 있다.예시 코드const MyComponent = ({ isActive }) => { return ( {isActive ? '활성 상태' : '비활성 상태'} );}; 위 코드에서 isActive가 true일 때 텍스트 색상이 파란색으로 변경되며, 인라인 스타일을 사용하여 조건에 따라 동적으로 스타..
