<div id="readability-page-1" class="page"><div><h3 id="props란">props란?</h3>
<blockquote>
props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다.
</blockquote>
<img src="https://velog.velcdn.com/images/psj0810/post/e065efc9-7df0-4a6b-8b97-cbe6655f17ba/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/1a85425f-e203-4345-9a12-5084d0c7d222/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/b7d4963d-8127-4b10-99af-69ba2c663276/image.png">
<h3 id="구조분해할당이란">구조분해할당이란?</h3>
<blockquote>
구조 분해 할당(Destructuring Assignment)은 JavaScript의 핵심 문법 중 하나예요. 
복잡한 객체나 배열에서 값을 쉽고 깔끔하게 꺼내는 문법이에요.
React에서도 <code>props</code>, <code>state</code>, <code>useState</code>, <code>useEffect</code> 등에서 아주 자주 쓰여요!
</blockquote>
<img src="https://velog.velcdn.com/images/psj0810/post/4cbea30a-1f9d-485e-93a5-8533f48ebf98/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/dbcc6fae-2a3e-41de-b82d-0ed999167d0b/image.png">
기존에는 배열이나 객체에서 값을 하나씩 찝어서 변수에 할당했다면 
구조분해할당은 변수를 여러개 묶어놓고, 그 변수값들에 객체의 값이나 배열의 값이 순차적으로 들어가게 하는것이다.
<h3 id="usestate란">useState란?</h3>
<img src="https://velog.velcdn.com/images/psj0810/post/ffee8c91-69d3-43e1-9c73-bd9df91c4d56/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/601cf7da-bfb0-4500-8cf9-ee9de082d54a/image.png">
onChange 이용한 useState 
<img src="https://velog.velcdn.com/images/psj0810/post/965d1d8f-5e44-48f1-80fe-37244d5048e6/image.png">
✅ 동작 흐름 
1. 초기값 <code>""</code>으로 <code>userEmail</code> 상태 생성 
2. 사용자가 이메일을 입력 
3. <code>onChange</code> 이벤트 발생 → <code>setUserEmail(...)</code> 실행 
4. 상태가 변경될때마다 컴포넌트가 다시 렌더링 
5. 입력창과 아래 텍스트에 새로운 이메일 반영됨
<h3 id="react-router-기본-개념">React Router 기본 개념</h3>
<blockquote>
React Router는 단일 페이지 애플리케이션(SPA)에서 URL에 따라 다른 화면을 보여주는 역할을 하죠.
SPA (Single Page Application)
<ul>
<li>페이지를 새로고침하지 않고, URL에 따라 컴포넌트만 바꾸는 </li>
</ul>
React Router
<ul>
<li>리액트에서 SPA 방식 라우팅을 구현하기 위한 대표적인 라이브러리</li>
</ul>
</blockquote>
설치방법
<pre><code>npm install react-router-dom</code></pre>
✅ 기본 구성
<pre><code>import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
 return (
 &lt;BrowserRouter&gt;
 &lt;Routes&gt;
 &lt;Route path="/" element={&lt;Home /&gt;} /&gt;
 &lt;Route path="/about" element={&lt;About /&gt;} /&gt;
 &lt;/Routes&gt;
 &lt;/BrowserRouter&gt;
 );
}</code></pre>
<img src="https://velog.velcdn.com/images/psj0810/post/54dd87ad-20a3-4ff7-a314-8e433f14aa78/image.png">
<h3 id="usenavigate란">useNavigate란?</h3>
<blockquote>
<code>useNavigate</code>는 버튼 클릭, 폼 제출 등 이벤트가 발생했을 때 특정 경로로 이동할 수 있게 해주는 함수입니다.
</blockquote>
사용법
<pre><code>import { useNavigate } from "react-router-dom";

function MyComponent() {
 const navigate = useNavigate(); // 내비게이션 함수 가져오기

 const handleClick = () =&gt; {
 navigate("/home"); // "/home" 경로로 이동
 };

 return &lt;button onClick={handleClick}&gt;홈으로 이동&lt;/button&gt;;
}</code></pre>
<h3 id="비동기에서-promise-객체란">비동기에서 Promise 객체란?</h3>
<blockquote>
"미래에 어떤 값이 도착할 것이다!" 라는 약속(= Promise)으로 
미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환한다. 
즉, Promise는 비동기 작업의 결과를 담는 객체이다.
</blockquote>
<blockquote>
하지만 이 Promise는 "미래에 데이터를 줄게"라고 말할 뿐, 
그 결과를 내가 .then()이나 await으로 꺼내서 써야 한다.
</blockquote>
Promise 기본 구조
<pre><code>const promise = new Promise((resolve, reject) =&gt; {
 // 시간이 오래 걸리는 작업
 if (성공) {
 resolve("성공 결과");
 } else {
 reject("실패 이유");
 }
});</code></pre>
사용하는 예
<pre><code>promise
 .then(result =&gt; console.log("성공:", result))
 .catch(error =&gt; console.error("실패:", error));</code></pre>
<blockquote>
Promise 작업의 결과는 resolve와 reject로 받을 수 있는데, Promise 작업이 성공했을 때는 resolve로 어떤 이유로 실패했을 때는 reject로 받는다.
</blockquote>
fetch 방식
<pre><code>fetch("https://api.example.com/data")
 .then(res =&gt; res.json())
 .then(data =&gt; console.log(data));</code></pre>
👉 이게 기존 방식(<code>Promise</code> + <code>then</code>) 
👉 <code>fetch()</code>는 Promise 객체를 반환합니다! 
👉 그러나 <code>async/await</code>이 더 가독성 좋고 <code>try/catch</code>로 에러 처리도 쉽습니다.
<h3 id="await은-왜-필요한가요">await은 왜 필요한가요?</h3>
<img src="https://velog.velcdn.com/images/psj0810/post/a72bd106-0065-49e2-8657-fb9685f538ca/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/a7986265-31f1-49f1-8343-1d3be8796849/image.png">
<blockquote>
자바스크립트 문법상, <code>await</code>은 반드시 <code>async 함수</code> 안에서만 사용 가능하다.
await은 Promise가 끝날 때까지 "기다리겠다"는 명령어인데, 
이걸 쓰는 함수는 자동으로 비동기 함수(Promise)로 변해야 하기 때문이에요.
</blockquote>
✅ async/await로 처리
<pre><code>async function getData() {
 const res = await fetch("https://api.com/data");
 const data = await res.json();
 console.log(data); // 원하는 데이터 출력됨!
}</code></pre>
<h3 id="프론트엔드가-백엔드에게-받는-상태코드">프론트엔드가 백엔드에게 받는 상태코드</h3>
<pre><code>if (response.ok) {
 alert(data.message); // 회원가입 성공 메시지
 navigate("/");
 } else {
 setError(data.message); // 실패 메시지 설정
 }</code></pre>
✅ response.ok란?
<ul>
<li>JavaScript fetch API에서 제공하는 응답(Response) 객체의 프로퍼티입니다.</li>
<li>이 값은 다음과 같은 조건에 따라 자동으로 true 또는 false가 됩니다: 
- <code>true</code> : 상태 코드가 200~299 사이일 때 
- <code>false</code> : 나머지 (예: 400, 401, 403, 404, 500 등)</li>
</ul>
<img src="https://velog.velcdn.com/images/psj0810/post/42c6de98-51fb-465d-925a-003ae1340f68/image.png">
<h3 id="🧠-타입스크립트란">🧠 타입스크립트란?</h3>
<blockquote>
TypeScript = JavaScript + 타입 시스템입니다.
<ul>
<li>자바스크립트 개발을 더 안전하고, 예측 가능하게 해주는 도구</li>
<li>런타임 전에 에러를 잡을 수 있어 디버깅 시간 절약</li>
<li>JS를 알고 있다면 바로 적응 가능</li>
<li>리액트, 노드 등 현대 웹 개발에서도 매우 많이 사용됨</li>
</ul>
</blockquote>
<img src="https://velog.velcdn.com/images/psj0810/post/b0942e12-6abb-46d2-86d4-2576bb538858/image.png">
🧩 주요 기능들
<blockquote>
<ol>
<li>타입 명시</li>
</ol>
<pre><code>let age: number = 25;
let isAdmin: boolean = true;
let username: string = "Alice";</code></pre>
</blockquote>
<blockquote>
<ol start="2">
<li>인터페이스와 타입</li>
</ol>
<pre><code>interface User {
 name: string;
 age: number;
}

const user: User = {
 name: "Bob",
 age: 30,
};</code></pre>
</blockquote>
<blockquote>
<ol start="3">
<li>함수 타입 지정</li>
</ol>
<pre><code>function add(a: number, b: number): number {
 return a + b;
}</code></pre>
</blockquote>
<blockquote>
<ol start="4">
<li>제네릭 (Generic)</li>
</ol>
<pre><code>function identity&lt;T&gt;(arg: T): T {
 return arg;
}

identity&lt;string&gt;("hello"); // 타입 추론도 가능</code></pre>
</blockquote>
코드 뜯어보기
<pre><code>import React from "react";

interface ButtonProps {
 children: React.ReactNode;
 onClick?: () =&gt; void;
 disabled?: boolean;
 className?: string;
}

export const Button: React.FC&lt;ButtonProps&gt; = ({ children, onClick, disabled, className }) =&gt; {
 return (
 &lt;button
 onClick={onClick}
 disabled={disabled}
 className={`px-4 py-2 rounded bg-blue-500 text-white disabled:bg-gray-300 ${className}`}
 &gt;
 {children}
 &lt;/button&gt;
 );
};</code></pre>
<img src="https://velog.velcdn.com/images/psj0810/post/b538374c-b305-4644-9ae4-74910e3993e4/image.png">
<h3 id="reactreactnode란">React.ReactNode란?</h3>
<blockquote>
children의 타입을 React.ReactNode로 지정해두면, 어떤 JSX 요소든 다 받을 수 있어서 유연하게 사용가능하다. 
<img src="https://velog.velcdn.com/images/psj0810/post/e0c0e742-f3b5-47ea-8d15-dc4295c4f9c8/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/e61dc384-a7c4-49b8-b6cf-10640e78e549/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/d79ccd0e-f1f3-43e9-9e1f-1ddf2d24c95b/image.png"> 
컴포넌트를 재사용해서 태그내의 내용만 변경하게 할 수 있도록 사용하는것
</blockquote>
<h3 id="reactfc">React.FC</h3>
<img src="https://velog.velcdn.com/images/psj0810/post/ed2af371-1d66-4dd9-824c-21b3a7f1758c/image.png"> 
<img src="https://velog.velcdn.com/images/psj0810/post/fd380cc2-a13a-4dca-849c-0e55a88cca40/image.png"></div></div>

psj.log

props란?
props는 부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달하는 방법입니다.
구조분해할당이란?
구조 분해 할당(Destructuring Assignment)은 JavaScript의 핵심 문법 중 하나예요.
복잡한 객체나 배열에서 값을 쉽고 깔끔하게 꺼내는 문법이에요.
React에서도 props, state, useState, useEffect 등에서 아주 자주 쓰여요!
기존에는 배열이나 객체에서 값을 하나씩 찝어서 변수에 할당했다면
구조분해할당은 변수를 여러개 묶어놓고, 그 변수값들에 객체의 값이나 배열의 값이 순차적으로 들어가게 하는것이다.
useState란?
onChange 이용한 useState
✅ 동작 흐름
초기값 ""으로 userEmail 상태 생성
사용자가 이메일을 입력
onChange 이벤트 발생 → setUserEmail(...) 실행
상태가 변경될때마다 컴포넌트가 다시 렌더링
입력창과 아래 텍스트에 새로운 이메일 반영됨
React Router 기본 개념
React Router는 단일 페이지 애플리케이션(SPA)에서 URL에 따라 다른 화면을 보여주는 역할을 하죠.
SPA (Single Page Application)
페이지를 새로고침하지 않고, URL에 따라 컴포넌트만 바꾸는 
리액트에서 SPA 방식 라우팅을 구현하기 위한 대표적인 라이브러리
설치방법
npm install react-router-dom
✅ 기본 구성
import { BrowserRouter, Routes, Route } from "react-router-dom";
function App() {
 return (
 <BrowserRouter>
 <Routes>
 <Route path="/" element={<Home />} />
 <Route path="/about" element={<About />} />
 </Routes>
 </BrowserRouter>
 );
}
useNavigate란?
useNavigate는 버튼 클릭, 폼 제출 등 이벤트가 발생했을 때 특정 경로로 이동할 수 있게 해주는 함수입니다.
사용법
import { useNavigate } from "react-router-dom";
function MyComponent() {
 const navigate = useNavigate(); // 내비게이션 함수 가져오기
 const handleClick = () => {
 navigate("/home"); // "/home" 경로로 이동
 };
 return <button onClick={handleClick}>홈으로 이동</button>;
}
비동기에서 Promise 객체란?
"미래에 어떤 값이 도착할 것이다!" 라는 약속(= Promise)으로
미래의 데이터 처리가 완료된 시점에 결과를 제공하겠다는 ‘약속(프로미스)’를 반환한다.
즉, Promise는 비동기 작업의 결과를 담는 객체이다.
하지만 이 Promise는 "미래에 데이터를 줄게"라고 말할 뿐,
그 결과를 내가 .then()이나 await으로 꺼내서 써야 한다.
Promise 기본 구조
const promise = new Promise((resolve, reject) => {
 // 시간이 오래 걸리는 작업
 if (성공) {
 resolve("성공 결과");
 } else {
 reject("실패 이유");
 }
});
사용하는 예
promise
 .then(result => console.log("성공:", result))
 .catch(error => console.error("실패:", error));
Promise 작업의 결과는 resolve와 reject로 받을 수 있는데, Promise 작업이 성공했을 때는 resolve로 어떤 이유로 실패했을 때는 reject로 받는다.
fetch 방식
fetch("https://api.example.com/data")
 .then(res => res.json())
 .then(data => console.log(data));
👉 이게 기존 방식(Promise + then)
👉 fetch()는 Promise 객체를 반환합니다!
👉 그러나 async/await이 더 가독성 좋고 try/catch로 에러 처리도 쉽습니다.
await은 왜 필요한가요?
자바스크립트 문법상, await은 반드시 async 함수 안에서만 사용 가능하다.
await은 Promise가 끝날 때까지 "기다리겠다"는 명령어인데,
이걸 쓰는 함수는 자동으로 비동기 함수(Promise)로 변해야 하기 때문이에요.
✅ async/await로 처리
async function getData() {
 const res = await fetch("https://api.com/data");
 const data = await res.json();
 console.log(data); // 원하는 데이터 출력됨!
}
프론트엔드가 백엔드에게 받는 상태코드
if (response.ok) {
 alert(data.message); // 회원가입 성공 메시지
 navigate("/");
 } else {
 setError(data.message); // 실패 메시지 설정
 }
✅ response.ok란?
JavaScript fetch API에서 제공하는 응답(Response) 객체의 프로퍼티입니다.
이 값은 다음과 같은 조건에 따라 자동으로 true 또는 false가 됩니다:
true : 상태 코드가 200~299 사이일 때
false : 나머지 (예: 400, 401, 403, 404, 500 등)
🧠 타입스크립트란?
TypeScript = JavaScript + 타입 시스템입니다.
자바스크립트 개발을 더 안전하고, 예측 가능하게 해주는 도구
런타임 전에 에러를 잡을 수 있어 디버깅 시간 절약
JS를 알고 있다면 바로 적응 가능
리액트, 노드 등 현대 웹 개발에서도 매우 많이 사용됨
🧩 주요 기능들
타입 명시
let age: number = 25;
let isAdmin: boolean = true;
let username: string = "Alice";
인터페이스와 타입
interface User {
 name: string;
 age: number;
}
>
const user: User = {
 name: "Bob",
 age: 30,
};
함수 타입 지정
function add(a: number, b: number): number {
 return a + b;
}
제네릭 (Generic)
function identity<T>(arg: T): T {
 return arg;
}
>
identity<string>("hello"); // 타입 추론도 가능
코드 뜯어보기
import React from "react";
interface ButtonProps {
 children: React.ReactNode;
 onClick?: () => void;
 disabled?: boolean;
 className?: string;
}
export const Button: React.FC<ButtonProps> = ({ children, onClick, disabled, className }) => {
 return (
 <button
 onClick={onClick}
 disabled={disabled}
 className={`px-4 py-2 rounded bg-blue-500 text-white disabled:bg-gray-300 ${className}`}
 >
 {children}
 </button>
 );
};
React.ReactNode란?
children의 타입을 React.ReactNode로 지정해두면, 어떤 JSX 요소든 다 받을 수 있어서 유연하게 사용가능하다.
컴포넌트를 재사용해서 태그내의 내용만 변경하게 할 수 있도록 사용하는것
React.FC

리액트

댓글