jonbeo 님의 블로그

React로 프로젝트를 만들다 보면 점점 커지는 컴포넌트,복붙으로 뒤죽박죽 된 코드들...관리하기도 힘들고, 다른 사람이 보기에도 난감한 구조가 되기 쉽습니다.이럴 때 필요한 게 바로 **‘리팩토링(Refactoring)’**입니다!이번 포스팅에서는 실무에서도 자주 쓰는 컴포넌트 리팩토링 꿀팁 5가지를 예제와 함께 소개해드리겠습니다. ✅ 꿀팁 1. UI 쪼개기 (컴포넌트 분리)하나의 컴포넌트에 300줄… 이건 절대 안 됩니다 😱UI 단위로 잘라서 컴포넌트를 쪼개면 관리도 쉬워지고 재사용도 가능해집니다.💡 Beforefunction Profile() { return ( 이름 설명 팔로우 );}💡 After function Profile() { ..

React 컴포넌트끼리 데이터를 주고받는 기본 방식은 props입니다.하지만 props를 너무 많이 전달하면 코드가 복잡해지기 쉬워요.이럴 때 등장하는 구조가 바로 Context API입니다.이 포스팅에서는 props와 Context가 어떤 차이가 있고언제 어떤 걸 쓰는 게 좋은지 흐름도와 예제 중심으로 이해하기 쉽게 알려드릴게요. ✅ 기본 개념 요약항목 Props Context API 목적부모 → 자식 데이터 전달전역 상태 공유사용 대상단일/소수의 컴포넌트여러 컴포넌트 간 데이터 공유단점중첩이 깊으면 props drilling 발생구조 파악이 어려워질 수 있음장점명시적인 데이터 전달전역 접근 가능, props 생략 가능 1️⃣ Props로 상태 전달하는 기본 예제function Parent() { ..

React에서 컴포넌트 상태를 다룰 땐 대부분 useState를 사용합니다.그런데 상태가 복잡해지면 useReducer가 더 유리할 때가 있어요.이번 글에서는 useState와 useReducer가 어떨 때 어떤 차이점이 있는지,그리고 언제 어떤 걸 써야 하는지 예제를 통해 비교해보겠습니다. ✅ useState란?가장 기본적인 상태관리 훅변수 1~2개, 간단한 숫자나 문자열 상태에 적합const [count, setCount] = useState(0); ✅ useReducer란?상태 업데이트 로직이 복잡할 때 사용여러 상태를 하나의 로직으로 관리 가능reducer 함수와 dispatch를 함께 사용const [state, dispatch] = useReducer(reducer, initialState)..

React로 SPA(Single Page Application)를 만들다 보면, 페이지 이동이 필요해집니다.이때 사용하는 도구가 바로 React Router DOM입니다.이번 포스팅에서는 2025년 기준으로 가장 많이 쓰는 버전인 v6 기준으로React Router DOM을 사용하는 방법을 기초부터 중첩 라우팅까지 간단한 예제와 함께 정리해드릴게요! ✅ React Router DOM이란? React는 기본적으로 페이지 이동 기능이 없습니다.SPA에서 URL에 따라 화면을 바꾸기 위해선 react-router-dom 패키지가 필요합니다. 1️⃣ 설치 방법npm install react-router-dom 또는 yarn 사용 시:yarn add react-router-dom 2️⃣ 기본 구성: Browse..

지금까지 MUI와 Ant Design의 기본 사용법과 커스터마이징 방법을 배워봤다면,이번엔 그걸 직접 관리자 페이지 레이아웃에 적용해보는 실습을 해볼 차례입니다.사이드바 + 상단바 + 콘텐츠 영역으로 구성된 기본적인 대시보드 틀을 구현해볼게요.✅ 구조 설계 미리보기+-------------------------------+| Header Bar |+------------+------------------+| Sidebar | Main Content |+------------+------------------+ ✅ MUI 버전 예제import { Box, AppBar, Toolbar, Drawer, Typography } from '@mui/material'..

Ant Design v5부터는 기존 Less 기반 커스터마이징 방식에서 CSS-in-JS 기반의 Token 시스템으로 바뀌었습니다.이제는 JavaScript 코드 안에서 직접 테마를 설정하고, 전역 스타일을 간편하게 커스터마이징할 수 있습니다.이번 포스팅에서는 색상, 폰트, 라운딩 등 핵심 스타일을 어떻게 내 맘대로 바꾸는지 정리해볼게요! ✅ 테마 커스터마이징 기본 구조npm install antdimport { ConfigProvider, theme } from 'antd';const customTheme = { token: { colorPrimary: '#FF6F61', borderRadius: 8, fontFamily: 'Pretendard, sans-serif', },};fun..

MUI의 강력한 장점 중 하나는 바로디자인 시스템을 손쉽게 커스터마이징할 수 있다는 점입니다.이번 포스팅에서는 createTheme()과 ThemeProvider를 활용해서전역 스타일, 색상, 폰트, 버튼 디자인 등을한 번에 관리하는 방법을 정리해보겠습니다. ✅ 기본 구조: 테마 만들기 & 적용하기import { createTheme, ThemeProvider } from '@mui/material/styles';const theme = createTheme({ palette: { primary: { main: '#FF6F61', }, secondary: { main: '#4ECDC4', }, }, typography: { fontFamily: 'Pret..

이번 포스팅에서는 **Ant Design(antd)**의 기본 사용법을 소개합니다.MUI보다 Business UI에 강하고, 기능이 풍부해서관리자 페이지나 백오피스 제작에 많이 사용되는 프레임워크입니다.지금부터 설치부터 실전 예제까지 한 번에 살펴볼게요! ✅ antd 설치하기npm install antd 그리고 스타일을 직접 import 해줘야 합니다:import 'antd/dist/reset.css'; // v5 기준 ✅ 1. Button 사용해보기import { Button } from 'antd';function App() { return ( Primary Default Dashed Text );} 타입설명primary강조 버튼default일반..

MUI(Material UI)는 리액트에서 가장 많이 쓰이는 UI 프레임워크 중 하나입니다.이번 포스팅에서는 MUI를 설치하고,실제로 자주 사용하는 버튼, 카드, 모달 컴포넌트를 직접 다뤄보며 사용법을 익혀보겠습니다. ✅ MUI 설치하기npm install @mui/material @emotion/react @emotion/styled💡 MUI는 Emotion을 기본 스타일 엔진으로 사용하기 때문에 위 세 개를 함께 설치해야 합니다. ✅ 1. MUI 버튼 사용해보기import Button from '@mui/material/Button';function App() { return ( Contained Outlined Text );} 타입설명contained..

리액트로 프로젝트를 하다 보면 가장 먼저 부딪히는 고민,“UI 라이브러리를 뭘 쓸까?” 입니다. 대표적인 두 가지는 바로MUI(Material UI) 와 Ant Design(antd) 이번 포스팅에서는이 두 라이브러리를 기능, 디자인, 학습 난이도, 생태계 등 기준으로 비교해보고,어떤 프로젝트에 어떤 선택이 더 적합한지 정리해볼까 합니다. ✅ MUI(Material UI)란?구글의 Material Design 가이드라인을 기반으로 만들어진 UI 프레임워크빠르고 직관적인 컴포넌트 구성공식 웹사이트: https://mui.com장점컴포넌트 스타일이 모던하고 깔끔Theme 커스터마이징이 강력함TypeScript 지원이 뛰어남단점Material Design에 익숙하지 않으면 다소 낯설게 느껴질 수 있음일부 고급..