React 개념 정리

🌱 React 입문자용 정리 

1️⃣ React는 뭐 하는 애야?

React 한 줄 요약

• 화면(UI)을 만들기 위한 JavaScript 라이브러리
• 버튼, 목록, 카드 같은 화면 조각을 컴포넌트로 만들어서 조립함

👉 “HTML + JS를 더 편하게, 체계적으로 관리하게 해주는 도구”

 

⭐⭐⭐ React 개요

• 정의: JavaScript 기반 Front-End UI 프레임워크
• 특징
  • UI를 컴포넌트 단위로 구성 → 재사용성 ↑
  • SPA(Single Page Application) 방식
  • 하나의 DOM 사용 → 변경된 부분만 업데이트
  • 대규모·동적 데이터 앱에 유리

•  

---

왜 React를 쓰냐면

• 화면이 자주 바뀌는 서비스에 강함
  • 댓글
  • 좋아요
  • 실시간 데이터
• 화면을 재사용 가능한 단위로 쪼갤 수 있음
• 코드가 길어져도 구조를 유지하기 쉬움

---

2️⃣ SPA란 뭐야? (React가 주로 쓰이는 방식)

SPA (Single Page Application)

• 페이지가 하나뿐인 웹앱
• 화면 이동할 때:
  • 새 HTML ❌
  • JS가 화면만 바꿔줌 ⭕

예시

• 인스타그램
• 카카오톡 웹
• 노션

👉 페이지 이동인데 새로고침이 안 일어남

 

⭐⭐⭐ SPA (Single Page Application)

   구분                                             내용

동작 방식	최초 HTML 1회 로드 → 이후 JS로 DOM 갱신
통신	API 기반 비동기(JSON)
장점	빠른 인터랙션, 부드러운 UX, 서버 구조 단순
단점	첫 로딩 느림, 상태 관리 복잡, SEO 어려움

---

SPA의 장단점 

👍 좋은 점

• 화면 전환이 빠르고 부드러움
• 앱 같은 느낌
• 서버는 데이터만 주면 돼서 역할 분리 쉬움

👎 아쉬운 점

• 처음 들어올 때 로딩이 느릴 수 있음
• JS 파일이 큼
• SEO(검색 노출)는 신경 써야 함

---

3️⃣ CSR vs SSR (헷갈리는 개념 쉽게)

이거 초보자 제일 많이 헷갈려. 비유로 갈게.

---

🧠 CSR (Client Side Rendering)

비유

• 빈 도화지 주고
• “이제 네가 그림 그려” 하는 방식

실제로는

1. 서버 → 거의 빈 HTML 전달
2. 브라우저:
   • JS 다운로드
   • JS 실행
   • 화면 그림

느낌

• 첫 화면: 늦음 😴
• 그 뒤부터: 빠름 ⚡

👉 Vite + React = 기본 CSR

---

🧠 SSR (Server Side Rendering)

비유

• 서버가 그림을 다 그려서 줌

실제로는

1. 서버가 화면 HTML 완성
2. 브라우저는 바로 보여줌
3. 이후 JS 붙여서 클릭 가능하게 만듦

느낌

• 첫 화면: 빠름 ⚡
• 구조: 조금 복잡

👉 Next.js = SSR 기반

---

그럼 뭘 써야 해?

• 연습 / 토이 프로젝트
  → CSR (Vite)
• 실제 서비스 / SEO 중요
  → SSR (Next.js)

---

4️⃣ Streaming SSR (왜 나왔을까?)

문제

• SSR은 HTML이 다 준비될 때까지 기다려야 함

해결

• HTML을 조각조각 나눠서 먼저 보여줌

React에서는

• <Suspense>로 감싼 부분만 나중에 로딩

 

---

5️⃣ 컴포넌트란?

컴포넌트 = 화면 조각

 

function Button() {

return

<button>클릭</button>;

}

장점

• 재사용 가능
• 유지보수 쉬움
• UI 구조가 눈에 보임

👉 React는 컴포넌트로 생각하는 사고방식이 핵심

---

6️⃣ props (부모 → 자식 전달)

props 쉽게 말하면

• 부모가 자식한테 주는 데이터

 

<Profile name="Dodoring" age={30} />

 

function Profile({ name, age }) {

    return

        <p>{name} / {age}</p>;

}

핵심 규칙

• props는 읽기 전용
• 자식이 직접 바꾸면 ❌

👉 “자식은 받은 값으로만 화면 그린다”

---

7️⃣ state (컴포넌트의 기억력)

state란?

• 컴포넌트가 기억해야 할 값
• 바뀌면 화면 다시 그림

 

const [count, setCount] = useState(0);

state 특징

• 숫자, 문자열, 객체 다 가능
• 직접 수정 ❌
• setState 함수로만 변경

 

setCount(count + 1);

 

---

왜 직접 바꾸면 안 돼?

 

count = count + 1; // ❌

• React는 “값이 바뀌었는지”를 추적함
• 직접 바꾸면 변경 감지를 못함

👉 그래서 setter 필수

---

8️⃣ state → props 흐름 (진짜 중요)

데이터 흐름 방향

 

부모 state ↓ 자식 props

자식이 값을 바꾸고 싶으면?

• 부모한테:
  • “바꾸는 함수”를 props로 받음
• 자식은 요청만 함
• 실제 변경은 부모가 함

👉 이게 React 사고방식의 핵심
(단방향 데이터 흐름)

---

9️⃣ useEffect (언제 쓰는지 감 잡기)

useEffect는 언제 쓰냐면

• 화면이 처음 그려졌을 때
• 값이 바뀌었을 때
• 화면에서 사라질 때

주 용도

• API 호출
• 이벤트 등록/해제
• 타이머
• 콘솔 로그

---

기본 패턴

 

useEffect(() => { // 화면에 나타났을 때 return () => { // 화면에서 사라질 때 }; }, []);

👉 처음엔 [] 패턴만 써도 충분

---

10️⃣ 초보자가 자주 헷갈리는 포인트 정리

❌ props는 자식이 수정 못 함
❌ state 직접 변경 못 함
❌ setter는 즉시 반영 안 될 수 있음
⭕ state 변경 → 자동 리렌더링
⭕ 컴포넌트는 작게 나누는 게 좋음

---

🧠 초보자용 한 줄 정리

• React = 화면을 컴포넌트로 관리
• SPA = 페이지 새로고침 없이 화면 변경
• props = 부모가 주는 값
• state = 컴포넌트의 기억
• 데이터는 위 → 아래로 흐른다