본문 바로가기
반응형

프론트엔드기초7

React Router 사용법 완전정복｜SPA에서 페이지 전환 구현하기 (기초부터 실전까지) 📘 리액트 스터디 시리즈 8편React Router로 페이지 구성하기｜SPA에서 라우팅 처리하는 법안녕하세요! 이번 편에서는 React Router를 이용해페이지 이동을 구현해볼 거예요 🚦React는 기본적으로 SPA(Single Page Application) 구조라서, URL을 바꿔도 전체 페이지를 새로고침하지 않고 컴포넌트만 바꿔주는 방식을 사용합니다.🔧 1. React Router 설치하기npm install react-router-dom✅ 설치가 완료되면 react-router-dom 패키지를 import 해서 사용합니다.🗺️ 2. 기본 구조 이해하기리액트 라우터는 다음과 같은 구조로 사용됩니다:import { BrowserRouter, Routes, Route } from 'react-.. 2025. 7. 6.
React 폼 처리 완전정복｜Controlled Component로 입력과 제출까지 완성하기 📘 리액트 스터디 시리즈 7편폼 입력과 Controlled Component 완전정복｜React로 사용자 입력 처리하기안녕하세요! 오늘은 사용자 입력을 다루는 방법, 즉 폼 처리와 Controlled Component를 배워봅니다 ✍️텍스트 입력, 체크박스, 셀렉트박스 등 모든 입력 UI를 리액트에서 다루는 실전 핵심 개념이에요!📥 Controlled Component란?입력값(value)이 컴포넌트의 상태(state)에 의해 제어되는 input 요소를 Controlled Component라고 합니다.즉, 사용자의 입력 → setState → 화면 렌더링 → 상태가 바뀜 → input value 갱신import { useState } from 'react';function NameInput() { .. 2025. 7. 5.
리액트 리스트 & 조건부 렌더링｜map(), 삼항 연산자 실전 예제로 쉽게 배우기 📘 리액트 스터디 시리즈 5편리스트 렌더링 & 조건부 렌더링｜React로 유동적인 UI 만들기안녕하세요! 오늘은 리액트에서 리스트를 출력하는 방법과 조건에 따라 UI를 다르게 보여주는 방법을 배워봅니다 😊이제부터는 데이터에 따라 동적으로 화면을 구성할 수 있어요!🔁 리스트 렌더링 (map 사용)React에서는 배열.map()을 이용해 컴포넌트를 반복 출력합니다.const items = ['사과', '바나나', '포도'];function ItemList() { return ( {items.map((item, index) => ( {item} ))} );}✅ 각 요소를 li로 렌더링✅ key는 각 항목의 고유값 (index는 임시로 사용 가능)🎯 주의:.. 2025. 7. 3.
리액트 useState 완전정복｜이벤트 처리부터 상태 기반 UI 만들기까지 📘 리액트 스터디 시리즈 4편이벤트 처리와 상태 관리｜useState로 동적인 UI 만들기안녕하세요! 리액트 스터디 시리즈 4편에서는 이벤트 처리와 상태(state) 관리를 다뤄볼 거예요.드디어 리액트의 진짜 힘! 사용자와 상호작용하는 UI를 만들 수 있게 됩니다 🚀🖱️ 리액트에서 이벤트 처리하기HTML에서 버튼 클릭은 onclick="..."처럼 쓰지만, React에서는 onClick={함수}처럼 카멜케이스와 중괄호를 사용합니다.function App() { function handleClick() { alert('버튼이 클릭되었어요!'); } return ( 클릭하기 );}✅ 이벤트 이름은 onClick, onChange 등 카멜케이스로!✅ 이벤트 핸들러는 함.. 2025. 7. 2.
프론트엔드 상태 관리의 모든 것｜Context, Props, 전역 상태 완벽 가이드 🔄 프론트엔드 상태 관리의 모든 것｜Context, Props, 전역 상태 이해하기안녕하세요, 퍼블리셔 노미입니다!지금까지 우리는 HTML/CSS/JS, fetch API, 로그인 인증까지 실전 웹 기능을 차근차근 배워왔죠.하지만 프로젝트가 점점 커지면, 하나의 문제를 반드시 마주하게 됩니다.바로 상태(State)를 어떻게 관리할 것인가?입니다.오늘은 프론트엔드 개발자라면 반드시 이해해야 할 상태 관리의 개념부터 props, Context, 전역 상태까지 기초부터 실전까지 완벽하게 정리해드릴게요.📌 상태(state)란?상태는 UI의 현재 모습이나 데이터의 값을 의미합니다.예를 들어:버튼 클릭 횟수로그인 여부폼에 입력된 값→ 이런 것들이 모두 “상태”이며, 사용자의 행동에 따라 변하고, 그에 따라 화면.. 2025. 4. 27.
AJAX를 활용한 실시간 데이터 처리｜비동기 웹 개발의 핵심 이해하기 ⚡ AJAX를 활용한 실시간 데이터 처리｜비동기 웹 개발의 핵심 이해하기안녕하세요, 퍼블리셔 노미입니다!웹 개발을 하다 보면 “페이지 새로고침 없이 데이터를 가져오는 방법 없을까?”라는 고민을 하게 되죠.그 해답이 바로 AJAX입니다.AJAX는 오늘날 대부분의 웹앱에서 사용하는 비동기 데이터 통신 기술입니다.이 글에서는 AJAX의 기본 개념부터 실전 fetch 활용법, 서버와의 실시간 데이터 주고받는 방식까지 초보자도 이해할 수 있도록 쉽게 설명해드릴게요.📌 AJAX란 무엇인가요?AJAX(Asynchronous JavaScript and XML)은 JavaScript를 이용해 페이지 전체를 새로고침하지 않고 서버와 데이터를 주고받을 수 있게 해주는 기술입니다.중요한 건 "비동기 통신"이라는 개념!페이지.. 2025. 4. 23.
반응형

티스토리툴바