jonbeo 님의 블로그

디자인이 깔끔한 로그인 페이지를 만들고 싶은데 CSS가 너무 어렵다고 느끼셨다면,이번 포스팅이 딱입니다!Tailwind CSS를 활용하면 복잡한 CSS 없이도 빠르게 예쁜 UI를 만들 수 있어요.이번에는 React + Tailwind 조합으로 로그인 폼을 직접 만드는 실습을 함께 해보겠습니다. ✅ 사전 준비1. React 프로젝트 생성npx create-react-app login-formcd login-form2. Tailwind 설치 및 설정npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p tailwind.config.js 수정:content: ["./src/**/*.{js,jsx,ts,tsx}"] src/index.css ..

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