React 썸네일형 리스트형 [React] 게시판 구현 - 프로젝트 생성 (1) Vite + React 프로젝트 생성 터미널 열고 다음 명령어 입력npm create vite@latest MyBoardApp --template react 위 명령어를 프로젝트 이름을 설정하고 프레임워크를 선택해줍니다React를 사용할 것이기 때문에 React를 선택해줍니다 그리고 저는 JS를 사용할거라 JavaScript를 선택해주겠습니다 그럼 설정이 끝나고어느정도 구조가 잡힌 기본 상태의 프로젝트가 생성 됩니다 npm install 을 실행해주고 설치가 끝나면 npm run dev 명령어를 실행해봅니다그럼 http://localhost:5173/ 이 url이 나오는데 저걸 클릭해서 들어가보면 기본 페이지가 잘 출력되는 것을 확인할 수 있습니다 그리고 react route를 사용해주기 위해np.. 더보기 [React] React Router를 이용한 페이지 전환 React Router로 페이지 전환하기 React Router 설치npm install react-router-domReact Router v6 기준입니다 기본 구성: BrowserRouter, Routes, Route import { BrowserRouter, Routes, Route } from "react-router-dom";import Home from "./pages/Home";import About from "./pages/About";function App() { return ( } /> } /> );} BrowserRouter: 라우팅 기능 전체를 감싸는 컴포넌트Routes: URL 경로에 따라 어떤 컴포넌트를 보.. 더보기 [React] Props 란? Props란 무엇인가? props(프롭스)는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 방법입니다.React에서는 컴포넌트를 함수처럼 호출하고, 인자를 전달하듯 props를 이용해 데이터를 주고받습니다. 위 코드는 Welcome이라는 컴포넌트에 "홍길동"이라는 값을 name이라는 이름으로 전달한 것입니다. 기본 예제function Welcome(props) { return 안녕하세요, {props.name}님!;}function App() { return ;} Welcome 컴포넌트는 props.name을 받아서 화면에 출력합니다.App 컴포넌트는 name이라는 props로 "홍길동"을 전달합니다. 구조 분해 할당을 통한 간단한 작성 function Welcome({ name.. 더보기 [React] React Component 분리 React 컴포넌트 분리란? React는 UI를 작은 단위의 컴포넌트들로 나누어 재사용하고 유지보수를 쉽게 하는 것이 핵심 철학입니다하나의 컴포넌트가 너무 길거나 여러 역할을 동시에 하고 있다면, 이를 역할별로 나누어 분리하는 것이 좋습니다 컴포넌트 분리의 장점 장점 설명 재사용성여러 페이지나 화면에서 같은 UI를 재사용할 수 있음가독성 향상각 컴포넌트의 역할이 명확해짐유지보수 용이특정 기능만 수정할 수 있어 코드 변경이 쉬움테스트 편리개별 단위로 테스트 가능 컴포넌트 분리가 필요한 경우하나의 컴포넌트에서 여러 역할(입력, 출력, 버튼 처리 등)을 할 때비슷한 형태의 UI가 반복될 때UI 일부를 다른 곳에서도 쓸 가능성이 있을 때길이가 너무 길어 가독성이 떨어질 때 컴포넌트 분리 실습 예제 .. 더보기 [React] Hook이란 무엇인가? Hook 이란? Hook은 React 16.8부터 도입된 기능으로, 함수형 컴포넌트에서도 상태(state) 관리나 생명주기(lifecycle) 같은 기능을 사용할 수 있게 해주는 함수입니다.기존에는 이런 기능들을 클래스 컴포넌트에서만 사용할 수 있었지만,Hook을 사용하면 훨씬 더 간결하고 가독성 좋은 함수형 코드로 동일한 작업을 수행할 수 있습니다. 대표적인 Hook 종류 Hook 이름 설명 useState컴포넌트 내부 상태를 관리useEffect컴포넌트 생명주기처럼 동작 (렌더링 후 동작 수행)useRefDOM 요소나 값을 기억하는 참조값 저장useContext전역 상태(데이터)를 여러 컴포넌트에서 공유useMemo, useCallback렌더링 최적화 관련 훅 1. useState – 상.. 더보기 [React] React JSX 기초 문법 React 기본 개념컴포넌트 기반 구조가상 DOM (Virtual DOM) 사용단방향 데이터 흐름JSX 문법 지원 JSX 란? JSX(JavaScript XML)는 JavaScript에 XML 문법을 확장한 문법입니다.React에서 UI를 구성할 때 사용하는 특수한 JavaScript 문법으로,마치 HTML을 작성하듯 컴포넌트의 구조를 선언할 수 있게 해줍니다.예를 들어, 일반 JavaScript에서는 DOM을 만들기 위해 복잡한 createElement() 코드를 작성해야 했지만,JSX를 사용하면 아래처럼 훨씬 간단하게 UI를 표현할 수 있습니다: JSX 예시const element = Hello, world!; 위 코드는 React 내부에서 아과 같이 변환됩니다:const element = Reac.. 더보기 [React] React 컴포넌트란? React 컴포넌트? 리액트에서 컴포넌트(Component)는 사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 모듈입니다.예를 들어, 버튼, 헤더, 입력 폼, 카드 등 화면에 등장하는 모든 UI 요소를 컴포넌트로 정의할 수 있습니다 컴포넌트 표현 방식: 함수형 vs 클래스형 리액트 컴포넌트는 크게 함수형(Function Component)과 클래스형(Class Component) 두 가지 방식입니다. 클래스형 컴포넌트import React, { Component } from 'react';class MyClassComponent extends Component { render() { return {this.props.message}; }} Component를 상속받아 ren.. 더보기 [React] React란? React란? 리액트는 페이스북(현 메타)에서 개발한 자바스크립트 라이브러리입니다주된 목적은 사용자 인터페이스(UI)를 구축하는 것으로, 특히 웹 애플리케이션의 화면을 구성하는 데 특화되어 있습니다.리액트는 전체 웹 애플리케이션을 만드는 프레임워크는 아니고, UI의 'View'만을 담당하는 라이브러리입니다.리액트를 사용하면 웹 페이지를 컴포넌트(Component)라는 작은 단위로 나누어 효율적이고재사용 가능한 방식으로 개발할 수 있습니다. React의 주요 특징 1. 컴포넌트 기반 구조리액트는 UI를 작고 독립적인 컴포넌트 단위로 분리해 개발합니다.예를 들어, 버튼, 입력창, 카드 박스 등이 각각 하나의 컴포넌트가 됩니다.이러한 컴포넌트는 재사용 가능하며, 유지보수가 쉬워집니다. 2. 선언형 프.. 더보기 이전 1 다음
