이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.📌 Form Action이란?React 19에서는 처럼 action 속성에 함수를 전달할 수 있습니다. 이때 React는 다음과 같은 동작을 자동으로 수행합니다:preventDefault() 자동 호출 → 직접 막을 필요 없음FormData 객체를 해당 함수에 인자로 전달, 등에 설정된 name 속성을 기반으로 FormData 구성제출이 완료되면 자동으로 폼 초기화 Submit주의: 모든 입력 요소에는 반드시 name 속성을 지정해야 합니다. 그래야 FormData에 포함됩니다. 📌 useActionState 훅useActionState는 폼의 상태와 ..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 리액트나 일반 HTML에서 form을 다룰 때, 생각보다 다양한 문제를 마주치게 됩니다.단순히 "입력값 받아서 제출"하는 걸 넘어, 다음과 같은 고민들이 따라오죠:어떻게 입력값을 깔끔하게 추출할까?유효성 검사는 언제, 어떻게 해야 깔끔할까?입력 후 초기화는 어떻게 해야 할까?리액트에서는 form 제출을 어떻게 다뤄야 할까?이번 글에서는 위의 문제들을 하나씩 정리하고, 실제로 어떤 방식으로 해결하는 게 좋은지 이야기해보겠습니다.📌 1. 입력 데이터 추출 방법폼에서 입력된 값을 가져오는 방식은 상황에 따라 다르게 선택할 수 있습니다.✅ 방법 1: useState로..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. HTML에서 태그는 원래 서버로 데이터를 보내기 위한 용도다HTML에서 태그는 **서버로 데이터를 제출(submit)**하고, 새로운 페이지를 받아오기 위한 구조로 설계됐다. 폼 안에서 버튼을 누르면 브라우저는 기본적으로 다음과 같은 흐름으로 동작한다:🔁 브라우저 기본 동작버튼 클릭 → 폼 제출 (submit 이벤트 발생)입력값을 포함해서 서버로 HTTP 요청 전송서버가 요청을 처리하고 새로운 HTML 페이지를 응답전체 페이지가 새로고침되면서 새 화면이 열린다🎈 왜 이렇게 설계됐을까? (→ SSR 기반 구조)이 흐름은 웹 초창기부터 사용되던 전통적인 방식..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 🎈 바닐라 CSS 스타일 컴포넌트에 스코핑 방법리액트에서 바닐라 CSS를 사용하는 경우, CSS가 리액트 컴포넌트에 스코프가 자동으로 적용되지 않습니다. 이는 CSS가 전역적으로 적용되기 때문에, 컴포넌트가 여러 개 있을 때 스타일이 서로 충돌할 수 있습니다.즉, 같은 페이지에 존재하는 A 컴포넌트와 B 컴포넌트가 존재한다고 할때, A 컴포넌트의 스타일에 필요한 css가 B컴포넌트의 스타일에 영향을 미칠 수 있습니다. 이를 해결하기 위해서 리액트 컴포넌트에 CSS를 스코프(scope)하기 위해 몇가지 방법을 소개해드리겠습니다. 1️⃣ style Prop 사용..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. Tailwind CSS는 유틸리티 퍼스트(Utility-First) CSS 프레임워크입니다.기존의 class="btn primary" 같은 추상적인 클래스명 대신, class="bg-blue-500 text-white p-4 rounded"처럼 직관적인 유틸리티 클래스들을 조합해서 스타일을 만듭니다.설치 방법프로젝트에 Tailwind 설치 (예: Vite 기준)npm install -D tailwindcss postcss autoprefixernpx tailwindcss init -p설정 파일 (tailwind.config.js) 예시module.exports..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. styled-component 는 CSS-in-JS 방식을 사용하는 라이브러리입니다.말 그대로 CSS 코드를 자바스크립트 안에 작성할 수 있게 해줍니다. 그리고 중요한 건, 작성한 스타일이 해당 컴포넌트에만 적용된다는 점입니다.즉, 스타일이 자동으로 스코프(scope)되어 다른 컴포넌트와 충돌하지 않도록 해줍니다.styled-component 설치npm install styled-components사용 방법 예시// Button.jsximport styled from 'styled-components';const StyledButton = styled.butto..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. CSS Modules은 CSS 클래스 이름을 자동으로 고유하게 만들어주는 방법입니다. 이를 통해 각 컴포넌트에서 사용하는 CSS가 전역에 영향을 미치지 않게 할 수 있습니다.create-react-app을 사용하면, CSS Modules는 기본적으로 지원됩니다. .module.css 확장자를 사용하면 됩니다.Button.module.css/* Button.module.css */.button { background-color: green; color: white; padding: 10px;}Button.js// Button.jsimport React fro..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.style Prop을 사용해서 CSS를 자바스크립트 객체로 작성하여 JSX에서 스타일을 적용할 수 있습니다. 이 방법을 통해 간단한 스타일링이나, 동적인 스타일 변경을 할 때 사용 가능 합니다.style Prop 기본 사용법CSS 속성 이름은 camelCase로 작성값은 문자열 또는 숫자로 작성function App() { return ( Click me! );}export default App;동적 스타일링 가능import React, { useState } from 'react';function App() {..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. React를 사용하다 보면 컴포넌트마다 비슷한 로직이 반복되는 경우가 많습니다.예를 들어, 데이터를 가져오기 위해 useEffect 안에서 fetch 요청을 보내고, loading 상태와 error 상태를 관리하는 코드를 여러 컴포넌트에서 반복하게 되기도 합니다.이럴 때 유용하게 사용할 수 있는 것이 바로 "커스텀 훅(Custom Hook)" 입니다. 🎈 먼저, 리액트 훅의 두 가지 규칙부터 다시 복습!리액트 훅은 컴포넌트 함수 또는 다른 훅 안에서만 사용 가능일반 함수에서는 사용 불가능합니다.훅은 조건문, 반복문, 중첩 함수 안에서 호출하면 안 됨 🎈 커스..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 이번 글에서는 React에서 HTTP 요청을 다루는 데 사용되는 기본적인 fetch API와 이를 어떻게 효율적으로 처리할 수 있는지에 대해 알아보겠습니다. 특히, 로딩 상태와 에러 처리를 어떻게 관리하는지를 다룰 예정입니다. ✅ 기본 fetch API 사용법 (GET 요청)1. fetch + .then() 사용useEffect(() => { fetch('') .then((response) => response.json()) .then((resData) => setAvailablePlaces(resData.places));}, []);response..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 이번 글에서는 클래스 컴포넌트의 구조, 생명주기 메서드, 컨텍스트 사용 방식, 그리고 오류 경계까지 정리해봤습니다. ✍️ 🎈 클래스 컴포넌트 기본 구조class MyComponent extends React.Component { render() { return Hello, {this.props.name}!; }}React.Component를 상속받아 정의합니다.render() 메서드 안에서 JSX를 반환해야 합니다.🤔 왜 존재할까?React 16.8 이전에는 state나 생명주기 메서드를 사용하려면 클래스 컴포넌트로 작성해야 했습니다.이후 Hooks..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다. 🎈 memo 함수memo 함수는 불필요한컴포넌트를 다시 렌더링 하지 않도록 방지하는 함수입니다.import React, { memo } from "react";const MyComponent = memo(function MyComponent(props) { // ...});부모 컴포넌트가 렌더링되면 자식 컴포넌트도 기본적으로 함께 렌더링됩니다. 하지만 자식 컴포넌트의 props가 변하지 않았다면 굳이 다시 렌더링할 필요가 없습니다.이럴 때 memo로 감싸면, props가 이전과 동일할 경우 렌더링을 건너뜁니다. 즉, 컴호넌트 함수가 다시 호출 되지 않게 됩..

이 프로젝트는 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 강의 일부의 연습 프로젝트 입니다. 📋 React Quiz App이 프로젝트는 사용자가 문제을 읽고 시간 제한 내에 답안을 선택하는 퀴즈 앱 입니다. 주어진 문제를 다 풀면 결과 페이지를 제공합니다. 단순히 문제를 풀기만 하는 UI가 아닌, 상태 관리와 퀴즈 흐름에 초점을 맞춰 구현했습니다. 이를 통해 React에서 컴포넌트를 어떻게 효율적으로 설계하고, Context API와 상태 관리를 어떻게 활용할 수 있는지에 대한 경험을 쌓을 수 있었습니다.특히, 각 문제의 상태(문제 풀이 중, 정답 확인, 시간 초과 등)를 어떻게 처리할지에 대한 고민과, 시간 제한 및 문제 흐름을 어떻게 자연..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.https://github.com/An0401na/React_Study/tree/main/11-Side-Effects-useEffec React_Study/11-Side-Effects-useEffect at main · An0401na/React_StudyContribute to An0401na/React_Study development by creating an account on GitHub.github.com   🎈 Side Effect(부수 효과)란?Side Effect(부수 효과)란 컴포넌트가 렌더링되는 과정과는 직접적인 관련이 없지만, 애플리케이션이 ..

이 글은 Udemy의 【한글자막】 React 완벽 가이드 2025 with React Router & Redux 를 수강하고 정리한 내용입니다.https://github.com/An0401na/React_Study/tree/main/10-Advanced-State-Managemen-with-Context-useReducer React_Study/10-Advanced-State-Managemen-with-Context-useReducer at main · An0401na/React_StudyContribute to An0401na/React_Study development by creating an account on GitHub.github.com 🎈Prop DrillingReact에서 상태나 함수를..