반응형 Front-End/React9 리액트 디자인 패턴 - 상태 끌어올리기와 렌더링 Props 패턴 리액트의 상태 관리: 상태 끌어올리기의 한계와 렌더 프롭스 패턴으로 해결하기안녕하세요! 오늘은 리액트에서 자주 마주치는 문제인 '상태 관리'에 대해 알아보고, 특히 복잡한 컴포넌트 구조에서 발생하는 문제점과 이를 해결하는 '렌더 프롭스(Render Props)' 패턴에 대해 자세히 살펴보겠습니다. 😊상태 끌어올리기(Lifting State Up)란?리액트에서는 여러 컴포넌트가 동일한 데이터를 공유해야 할 때, 해당 데이터를 공통 부모 컴포넌트로 '끌어올리는' 방식을 권장합니다. 이것이 바로 '상태 끌어올리기' 패턴입니다.간단한 예를 살펴볼까요?// 전통적인 상태 끌어올리기 방식function App() { const [temperature, setTemperature] = useState(""); .. 2025. 5. 5. Shadcn UI 리뷰: 리액트 생태계의 새로운 패러다임 https://ui.shadcn.com/ Build your component library - shadcn/uiA set of beautifully-designed, accessible components and a code distribution platform. Works with your favorite frameworks. Open Source. Open Code.ui.shadcn.com 리액트 개발의 새 바람, Shadcn UI의 부상최근 프론트엔드 개발 커뮤니티에서 가장 뜨거운 화제로 떠오른 Shadcn UI는 기존 UI 라이브러리들의 패러다임을 완전히 바꾸어 놓고 있습니다. 기존 React 컴포넌트 라이브러리들과 달리, Shadcn UI는 "라이브러리가 아닌 컴포넌트 모음(not a lib.. 2025. 3. 2. T3 Stack에서 Websocket 동시 적용하기 들어가며T3는 타입스크립트 기반으로 NextJS, tRPC, tailwind 등의 주요 라이브러리들을 사전에 조합해서 풀스택 웹 앱을 만들 수 있게 해주는 개발 툴킷이다.현대 웹 프레임워크는 Front-End와 Back-End가 분리되어 구성된 형태가 표준으로 자리잡았다.그러나 빠르게 MVP를 출시해야 하는 스타트업이나 소규모 개발팀에서는 Front와 Back을 나누는 행위 자체가 번거로울 때가 있다.MAU가 많지 않고, 비즈니스 로직이 복잡하지 않는데 프로그램 구조를 표준에 맞추다보니 오히려 개발 공수가 늘어난다.이러한 문제를 해결하기 위해 일부 타입스크립트 개발자들을 중심으로 풀스택 어플리케이션을 구현하는 움직임이 생겼다.여기서 말하는 풀스택은 레거시라 불리는 JSP / SRPING의 디자인 패턴이 .. 2025. 2. 23. CRA vs Vite: React 개발 환경의 새로운 패러다임 들어가며React 애플리케이션을 시작할 때 개발자들이 가장 먼저 마주치는 선택지 중 하나는 바로 개발 환경 설정입니다. 오랫동안 Create React App(CRA)은 React 프로젝트의 표준으로 쓰였지만 2020년 이후 Vite라는 강력한 대안이 등장하면서, 많은 개발자들이 Vite로 전환하고 있습니다. 이 글에서는 두 도구의 차이점을 심도 있게 살펴보고, Vite가 제공하는 이점들을 상세히 알아보겠습니다.Create React App (CRA)의 특징1. 작동 방식webpack을 기반으로 동작전체 애플리케이션을 번들링한 후 개발 서버 구동Hot Module Replacement(HMR)를 위해 전체 번들을 다시 빌드2. 장점안정적이고 검증된 도구React 생태계와의 완벽한 통합복잡한 설정 없이 바.. 2025. 2. 10. React의 useEffect 훅과 사이드 이펙트 알아보기 React의 useEffect와 사이드 이펙트 이해하기React 애플리케이션을 개발하다 보면 컴포넌트 내에서 데이터 페칭, DOM 조작, 구독(subscription) 설정 등 다양한 사이드 이펙트를 다뤄야 할 때가 있습니다. 오늘은 React의 useEffect 훅을 통해 이러한 사이드 이펙트를 어떻게 효과적으로 관리할 수 있는지 알아보겠습니다.사이드 이펙트란?사이드 이펙트는 컴포넌트의 렌더링 과정에서 발생하는 순수하지 않은 동작들을 의미합니다. 예를 들면:API 호출DOM 직접 조작브라우저 API (localStorage, setTimeout 등) 사용구독 설정 및 해제이러한 작업들은 컴포넌트의 렌더링에 직접적인 영향을 미치지 않지만 애플리케이션의 동작에 필수적인 요소들입니다.useEffect 개요와.. 2025. 2. 8. React 컴포넌트 구현 방식 비교: 화살표 함수 vs 일반 함수 React 컴포넌트를 작성할 때 우리는 크게 두 가지 함수 선언 방식을 사용할 수 있습니다: 화살표 함수(Arrow Function)와 일반 함수 선언(Function Declaration). 이 두 방식의 차이점과 각각의 장단점을 자세히 살펴보겠습니다.1. 문법적 차이일반 함수 선언 방식function Greeting(props) { return 안녕하세요, {props.name}님!;}// 또는 함수 표현식으로도 가능const Greeting = function(props) { return 안녕하세요, {props.name}님!;};화살표 함수 방식const Greeting = (props) => { return 안녕하세요, {props.name}님!;};// 더 간단한 형태로도 가능const .. 2025. 2. 7. 이전 1 2 다음
