React Study - 1

✨SPA (Single Page Application)란?

한 개의 html 파일에서 페이지를 이동하지 않고
JavaScript로 필요한 부분만 바꾸는 방식

SPA 장점

• 새로고침이 필요없음
• 부드러운 화면 전환
• 모바일 앱처럼 동작하는 웹사이트

🧩 컴포넌트란?

화면을 여러 개의 조각단위(컴포넌트)로 나눈 것
요소마다 컴포넌트로 분리하여 재사용 가능하고,
안의 내용만 바꿔서 다양하게 활용할 수 있음

컴포넌트의 큰 특징

• 이름은 반드시 대문자로 시작
• props를 통해서 데이터 전달

왜 컴포넌트가 중요할까?

1. 재사용성 : 한 번 만들고 여러번 사용 가능
2. 유지보수 : 코드가 기능별로 나뉨 > 수정, 개선 쉬움
3. 조립식 UI : 컴포넌트를 쌓아서 전체 페이지를 구성

🧾 JSX란?

JavaScript XML의 줄임말
JS 안에서 HTML처럼 UI구조를 표현할 수 있음

→ 코드가 직관적이고 가독성이 좋아짐!

📦 Props란?

Properties의 줄임말
부모 컴포넌트가 자식 컴포넌트에게 데이터를 전달할 때 사용

// User 컴포넌트 : props.name 사용
function User(props){
	return <p>{props.name}님 환영해요!</p>
}

// App 컴포넌트 : User에 name을 전달
function App(){
	return (
    	<div>
        	<User name="주람"/>
        </div>
    )
}

Props의 특징

• 읽기 전용 (자식 컴포넌트에서 변경 불가)
• 객체 형태로 전달 (여러 값을 한 번에 넘김)

🔄 State의 특징

사용자의 상호작용에 따라 값이 바뀌는 데이터

import { useState } from "react"; // state 사용 시 import

• 컴포넌트 내부에서 선언하고 내부에서 사용
• 화면에 즉시 반영
• 비동기적으로 변경됨

📌 예제 1 : 버튼 클릭하면 숫자 올라가기

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0); // count라는 state 선언

  return (
    <div>
      <p>현재 숫자: {count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
    </div>
  );
}

📌 예제 2 : 좋아요 버튼 누르기

import { useState } from "react";

function Like(){
    const [liked, setLiked] = useState(false)

    return (
        <button onClick={()=>setLiked(!liked)}>
            {liked? '좋아요취소':'좋아요'}
        </button>
    )
}