9일차_ React_(App.jsx구조)

⚛️ 1. React(리액트)란 무엇일까요?

리액트를 한마디로 정의하면 "웹사이트를 레고 블록 조립하듯 뚝딱뚝딱 만드는 도구"입니다.

예전에는 웹사이트(집)를 만들 때 벽돌을 처음부터 끝까지 하나하나 쌓아 올렸다면, 리액트는 미리 만들어둔 '블록(컴포넌트)'들을 가져다 끼우기만 하면 됩니다.

게다가 블록 안의 글자(데이터)만 쓱 바꾸면, 리액트가 알아서 화면을 고쳐줍니다.

[개별 레고 블록들]                 [완성된 웹사이트 화면]
 ┌───────────┐                     ┌────────────────────┐
 │ 🔍 검색창 │                     │ 🔍 검색창          │
 └───────────┘                     ├─────────┬──────────┤
 ┌───────────┐      조립(React)    │         │          │
 │ 👤 프로필 │    ────────────▶    │ 👤프로필│ 🖼️사진 1 │
 └───────────┘                     │         │          │
 ┌───────────┐                     ├─────────┼──────────┤
 │ 🖼️ 사진 1 │                     │ ⚙️ 설정 │ 🖼️사진 2 │
 └───────────┘                     └─────────┴──────────┘

 

📝 2. JSX : 자바스크립트 안에 HTML 쓰기

리액트에서는 JSX라는 아주 특별한 문법을 씁니다.

쉽게 말해 "자바스크립트(JS) 파일 안에서 HTML 뼈대를 마음껏 쓸 수 있게 해주는 규칙"입니다.

HTML과 거의 똑같이 생겼지만, 딱 3가지 작은 규칙만 주의하시면 됩니다.

🚨 HTML과 JSX의 결정적 차이점 3가지

구분	기존 HTML 방식	리액트 JSX 방식 (✨)	왜 다를까요?
① 이름표     (클래스)	<div class="box">	<div className="box">	자바스크립트에 이미 class라는 단어가 있어서 겹치지 않게 피한 거예요!
② 데이터 넣기	<p>수강생님 환영합니다</p>	<p>{name}님 환영합니다</p>	{ } 중괄호를 열면 그 안에 'JS 값이나 계산식'을 넣을 수 있어요.
③ 태그 닫기	<img src="a.png">	<img src="a.png" />	리액트는 아주 엄격해서 짝이 없는 빈 태그는 끝에 꼭 /로 닫아줘야 해요.

{ } 중괄호는 "자, 지금부터 자바스크립트 값이 들어간다!" 라고 알려주는 마법의 주머니라고 생각하시면 됩니다.

변수, 숫자 계산, 함수 등 뭐든 들어갈 수 있어요.

💻 3. 실전 예제와 예상 화면

 

리액트(JSX) 코드

const App = () => {
  const name = "수강생"
  const age = 20

  return (
    <div className="box"> 
      <h1>안녕, {name}!</h1>      
      <p>{1 + 1}</p>                   
      <img src="a.png" alt="이미지" /> 
      <p>{name}님은 {age}살, 내년엔 {age + 1}살</p> 
    </div>
  )
}

 

[예상 그림] 실제 인터넷 창에 뜨는 결과

┌──────────────────────────────────────────────────┐
 │ 🌐 내 첫 리액트 웹사이트                         │
 ├──────────────────────────────────────────────────┤
 │                                                  │
 │  안녕, 수강생!                                   │
 │                                                  │
 │  2                                               │
 │                                                  │
 │  [ 🖼️ a.png 이미지 사진이 뜨는 자리 ]            │
 │                                                  │
 │  수강생님은 20살, 내년엔 21살                    │
 │                                                  │
 └──────────────────────────────────────────────────┘

 

구간별 이해하기 

 

🥦 [1. ] 변수 선언 구역 (재료 준비)

JavaScript

const App = () => {    // 1. App이라는 요리사(컴포넌트)를 만들게요!
  const name = "수강생" // 2. 'name'이라는 상자에 "수강생" 글자를 담아둡니다 (재료 1)
  const age = 20       // 3. 'age'이라는 상자에 20이라는 숫자를 담아둡니다 (재료 2)

 

🍽️ [2. ] return ( ) 구역 (실제 화면에 보여지는 접시)

JavaScript

  return (
    <div className="box"> 
      <h1>안녕, {name}!</h1>      
      <p>{1 + 1}</p>                   
      <img src="a.png" alt="이미지" /> 
      <p>{name}님은 {age}살, 내년엔 {age + 1}살</p> 
    </div>
  )
}

 

• 역할: 여기서부터가 진짜 인터넷 화면에 그려지는 코드입니다! * 요리사가 준비한 재료들을 예쁜 그릇(<div>, <h1>, <p>)에 담아서 손님(사용자)에게 내놓는(return) 과정입니다.
• 컴퓨터는 이 return ( ) 안에 적힌 코드를 읽어서 우리 눈에 보이는 웹사이트 화면을 만들어 줍니다.

CSS 적용할 때 <div>를 쓴다. 

HTML이나 리액트에서 <div>는 아무 기능이 없는 '투명한 빈 상자(Box)'입니다.

글자나 이미지를 이 상자 안에 예쁘게 묶어두고, 상자에 이름표(className)를 붙여서 CSS로 스타일을 꾸밉니다.

• 코드 분석: <div className="box">
• 의미: "지금부터 이 상자 안에 들어가는 모든 요소들을 'box'라는 이름의 구역으로 묶을게! 그리고 CSS 파일에 가서 .box한테 예쁜 배경색이랑 테두리를 달아줘!"라고 명령하는 것입니다. 구역을 나누고 디자인을 입힐 때 <div>는 가장 많이 쓰이는 필수 태그입니다.

<></> (프래그먼트) 배우기

🚨 리액트의 대원칙: return ( ) 안의 모든 코드들은 반드시 커다란 하나의 상자(태그) 안에 다 감싸져 있어야 한다!

만약 아래처럼 대장 상자(<div>) 없이 알맹이들만 덜렁 내놓으면 리액트는 "누가 대장 상자야?!" 하면서 에러를 냅니다.

JavaScript

// ❌ 에러 발생! 감싸주는 대장 상자가 없어요.
return (
  <h1>안녕!</h1>
  <p>반가워</p>
)

이때 굳이 CSS 디자인을 줄 것도 아니고,

화면 구조상 무의미한 <div> 상자를 또 만들고 싶지 않을 때 쓰는 마법의 투명 상자가 바로 <> </> (React Fragment) 입니다.

🛠️ <></>를 사용한 코드 예시

JavaScript

 

const App = () => {
  return (
    <>  {/* 무의미한 div 대신 투명 상자로 시작! */}
      <h1>안녕!</h1>
      <p>반가워</p>
    </> {/* 투명 상자 끝! */}
  )
}

📊 [도표] <div> vs <></> 차이점 정리

방식	코드 모양	실제 브라우저(HTML) 결과	언제 쓰나요?
① <div> 상자	<div> ... </div>	<div> 상자가 화면 구조에 실제로 남음	테두리, 배경색 등 CSS 디자인을 직접 입혀야 할 때
② <></> 투명 상자	<> ... </>	감싸는 태그 없이 알맹이만 깔끔하게 남음	디자인은 필요 없고, 리액트의 "하나로 감싸라"는 규칙만 통과하고 싶을 때