-

3-5. 실습(Component Practice)지금까지 학습한:컴포넌트Props컴포넌트 설계스타일링개념들을 실제로 사용하는 단계임.React는 단순 문법 암기보다:"컴포넌트를 어떻게 재사용 가능한 구조로 설계하는가?"가 매우 중요.이번 실습에서는 실무에서도 자주 등장하는 대표적인 공통 UI 컴포넌트들을 만들어봄.버튼 시스템 만들기React 실무에서 가장 많이 재사용되는 컴포넌트 중 하나가 Button 컴포넌트임.버튼은 단순히 하나의 디자인만 존재하지 않음.예시:Primary ButtonSecondary ButtonDanger ButtonDisabled ButtonSmall / Medium / Large등 다양한 상태 존재.이때 중요한 것은:버튼 하나를 여러 형태로 재사용 가능하게 만드는 구조임.기본 B..

3-4. 컴포넌트 스타일링(Component Styling)React에서 컴포넌트를 만들었다면 다음으로 중요한 것이 스타일링임.즉:버튼 디자인레이아웃 구성반응형 처리애니메이션상태별 스타일 변화등을 구현해야 실제 UI 완성 가능.React는 HTML/CSS를 기반으로 동작하기 때문에 CSS 사용 자체는 일반 웹과 비슷하지만, 컴포넌트 기반 구조에 맞는 다양한 스타일링 방식들이 존재함.대표적으로 많이 사용하는 방식:일반 CSSCSS ModuleSCSSstyled-componentsTailwind CSS등 존재.프로젝트 규모와 팀 스타일에 따라 선택 방식 달라짐.CSS ModuleCSS Module은:CSS 클래스 충돌 문제를 해결하기 위한 방식기존 CSS 문제점 중 가장 대표적인 것은:.button { c..

3-3. 컴포넌트 설계(Component Design)React에서 컴포넌트를 만드는 것과, 컴포넌트를 "잘 설계하는 것"은 완전히 다른 개념임.초반에는 단순히 화면을 분리하는 수준으로 컴포넌트를 만들게 되지만, 프로젝트 규모가 커질수록 다음 문제가 발생하기 시작함:컴포넌트 역할이 애매해짐재사용이 어려워짐상태 관리가 복잡해짐파일 구조가 무너짐유지보수가 어려워짐그래서 React 실무에서는 단순히 컴포넌트를 만드는 것이 아니라:"어떻게 역할을 분리할 것인가?" 를 굉장히 중요하게 생각함.컴포넌트 설계는 결국:재사용성유지보수성확장성가독성을 높이기 위한 구조 설계 과정이라고 볼 수 있음.Atomic DesignAtomic Design은 컴포넌트를 작은 단위부터 조립해나가는 UI 설계 방식임.브래드 프로스트(Br..

3-2. PropsReact에서 컴포넌트 재사용성을 높여주는 가장 중요한 개념 중 하나가 Props 임.Props를 사용하면:부모 컴포넌트 → 자식 컴포넌트 데이터 전달 가능같은 컴포넌트를 다양한 형태로 재사용 가능동적인 UI 구성 가능React는 컴포넌트 기반 구조이기 때문에:"컴포넌트끼리 데이터를 어떻게 전달하는가?"가 매우 중요.그 시작이 바로 Props 개념임.3-2-1. Props란?Props는:부모 컴포넌트가 자식 컴포넌트에게 전달하는 데이터라는 개념임.properties 의 줄임말.HTML 속성과 매우 비슷한 형태 사용.예시:HTML에서도 태그에 데이터를 전달함.React에서는:처럼 컴포넌트에게 데이터 전달 가능.3-2-2. Props 기본 구조부모 컴포넌트:자식 컴포넌트:function B..

create-react-app(CRA) 기반 React 프로젝트━━━━━━━━━━━━━━━━━━━━━━━━━━2-1. CRA란 무엇인가CRA의 정의Create React App는 React 공식 프로젝트 생성 도구였던 환경임.복잡한 설정 없이 React 프로젝트를 빠르게 시작할 수 있도록 제공된 도구에 해당함.CRA의 주요 특징React 전용 생성 도구Vite와 달리 React만을 위한 프로젝트 생성 구조 제공.설정 자동화 구조Webpack, Babel 설정이 내부에 숨겨진 상태로 제공됨.초반 학습 난이도 낮음설정 없이 바로 React 개발 가능.내부 설정 수정 어려움 존재Webpack 설정 직접 수정이 어려운 구조 사용.━━━━━━━━━━━━━━━━━━━━━━━━━━2-2. CRA 프로젝트 생성 과정프..

1. Vite 기반 React 프로젝트━━━━━━━━━━━━━━━━━━━━━━━━━━1-1. Vite란 무엇인가Vite의 정의Vite는 빠른 프론트엔드 개발 환경 구성을 위한 빌드 도구임.React 프로젝트를 빠르게 실행하고 개발할 수 있도록 설계된 최신 개발 환경에 해당함.Vite의 주요 특징빠른 개발 서버기존 번들링 방식보다 훨씬 빠른 실행 속도 제공.Fast Refresh 지원코드 수정 후 브라우저 즉시 반영 가능.최신 JavaScript 지원ES Module 기반 최신 개발 환경 사용.간단한 설정 구조복잡한 Webpack 설정 없이 빠른 프로젝트 시작 가능.━━━━━━━━━━━━━━━━━━━━━━━━━━1-2. Vite 프로젝트 생성 과정프로젝트 생성 명령어터미널 실행:npm create vite..

3-1. 컴포넌트(Component) 개념React에서 가장 중요한 핵심은 컴포넌트(Component) 임.React는 화면(UI)을 작은 조각으로 나누고, 그 조각들을 조합해서 하나의 페이지를 만드는 구조임.예를 들어 쇼핑몰 페이지 구성 시:헤더(Header)상품 카드(Product Card)버튼(Button)모달(Modal)푸터(Footer)같은 요소들을 각각 독립적인 컴포넌트로 구성함.즉 React는:"UI를 부품처럼 조립"하는 방식이라고 볼 수 있음.✓ Component = "UI 부품" 개념으로 기억.컴포넌트란?컴포넌트는:UI를 독립적이고 재사용 가능한 단위로 나눈 구조React에서는 컴포넌트를 조립해서 화면을 구성함.예시:function Header() { return 헤더;}컴포넌트 하나가..

1. 메뉴 UI 만들기목표배열 데이터를 메뉴로 출력map() 사용JSX 기본 구조 익히기기본 데이터const menus = ["Home", "About", "Service", "Contact"];메뉴 UI 구현function App() { const menus = ["Home", "About", "Service", "Contact"]; return ( {menus.map((menu) => ( {menu} ))} );}export default App;핵심 포인트map()으로 반복 렌더링key는 문자열(menu) 사용 가능nav + ul 구조로 의미 부여2. 카드 컴포넌트 만들기목표UI를 컴포넌트로 분리props 개념 사용재..

2-3. JSX 렌더링 규칙JSX는 “어떤 UI를 화면에 보여줄지”를 결정하는 문법이고, 그 안에는 조건, 반복, 구조 분리 규칙이 존재1. 조건부 렌더링조건에 따라 화면에 보여줄 내용을 다르게 하는 방식React에서는 if, 삼항연산자, && 연산자를 주로 사용1) 삼항 연산자 (가장 많이 사용)조건에 따라 A를 보여주거나 B를 보여줘야 할 때 가장 많이 사용function App() { const isLogin = true; return ( {isLogin ? 로그인 상태 : 비로그인 상태} );}동작 구조true → 첫 번째 값 렌더링false → 두 번째 값 렌더링2) && 연산자 (조건이 true일 때만 렌더링)조건이 참일 때만 특정 UI를 보여주고, 아닐 때는 아무..

2-2. JSX 내부 동작JSX는 “HTML처럼 보이는 문법”이지만, 브라우저가 직접 이해하는 문법이 아니다.실제로는 JavaScript 코드로 변환된 뒤 실행된다.1. JSX → JavaScript 변환JSX는 실행되기 전에 반드시 JavaScript 코드로 변환된다.JSX 코드const element = Hello;변환된 JavaScript 코드 (React 방식)const element = React.createElement("h1", null, "Hello");핵심 구조JSX는 결국 다음 형태로 바뀐다:React.createElement( type, props, children);2. React.createElement 개념기본 구조React.createElement("h1", { class..