리액트 공부하기 - props

state를 겨우 이해했는데,

props의 등장이네요 ! !  자꾸 들여다보면 이해가 되겠지 ?

 

(사탄들의 학교에 루시퍼의 등장이란 ~)

매 개념이 내게 루시퍼,,

---

1. props를 비유로써 알아보자

2. 코드 흐름

3. 코드 예시

4. 파라미터 라고 이해하면 편할까?

5. 읽기 전용과 단방향의 의미

6. 프롭스 전체 흐름

7. props가 없을 때, 기본값을 넣고 싶을때 ! "defaultProps나 디스트럭처링"  사용

---

props란 ? 비유로써 쉽게 알아보자.

 

비유: 엄마가 도시락을 싸서 아이에게 학교에 보내주는 것

리액트 컴포넌트는 함수이자 **재료(데이터)**를 받아서 UI를 만들어주는 기계야.

 

이때 엄마가 싸준 도시락(재료)이 바로 props야!

아이(자식 컴포넌트)는 도시락을 받고(=props를 받고) 그 안의 반찬(데이터)을 꺼내서 먹는 거지(=화면에 보여줌).

 

 

간단한 코드 예시

// 부모 컴포넌트
function App() {
  return <Welcome name="Jane" />;
}

// 자식 컴포넌트
function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

 

App은 Welcome에게 name="Jane"이라는 도시락을 싸줌.

Welcome은 그걸 props.name으로 받아서 화면에 보여줘: Hello, Jane!

 

 

맞아! 정리하자면 이런 흐름이야:

💞 컴포넌트 & props의 흐름

❶먼저 자식 컴포넌트를 만들어
→ 이 컴포넌트는 함수처럼 인자를 받는 형태로 만들지

function Welcome(props) {
  return <h1>Hello, {props.name}!</h1>;
}

여기서 props는 인자(argument) 개념 맞아!

함수로 보면 props는 Welcome이라는 함수의 **매개변수(parameter)**라고 보면 돼

 

❷그 자식 컴포넌트를 부모 컴포넌트에서 사용해
→ 사용할 때 값을 넣어줘! (인자 전달처럼!)

function App() {
  return <Welcome name="Jane" />;
}

 

 

여기서 name="Jane"은 props의 한 요소고,

결국 Welcome({ name: "Jane" }) 이런 식으로 함수 호출되는 느낌!

 

---

“props는 부모가 자식한테 넘겨주는 건데, 자식 컴포넌트를 먼저 만든다고?” 이게 헷갈릴 수 있지!

근데 이건 "코드를 짜는 순서"랑 "데이터가 흐르는 방향"을 구분해서 생각하면 완전 이해돼.

 

코드 짜는 순서 vs 실제 데이터 흐름

1. 코드 짜는 순서

• 자식 컴포넌트를 먼저 만들어야, 부모에서 그걸 사용할 수 있어.
• 마치 함수를 먼저 정의해야, 나중에 호출할 수 있는 것처럼!

// 자식 컴포넌트 정의
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 부모 컴포넌트에서 사용
function App() {
  return <Welcome name="Jane" />;
}

 

2. 실제로 앱이 동작할 때 (데이터 흐름)

• React는 App() → Welcome() 순으로 실행돼.
• 그래서 실제로는 부모가 먼저 실행되고, 그 안에서 자식 컴포넌트가 호출되면서 props가 전달돼!

// 실행 순서 (React 내부)
App() {
  return Welcome({ name: "Jane" }); // 이렇게 호출되는 느낌!
}

 

✨ 한 줄 요약

자식 컴포넌트를 먼저 “정의”하고, 부모가 실행될 때 자식에게 props를 “전달”한다.
그래서 “props는 부모 → 자식” 방향이 맞아!

---

 

---

 

 

✨ props 코드 예시

EX 1. 인사말 컴포넌트

function Greeting(props) {
  return <h2>Hi, {props.name}!</h2>;
}

function App() {
  return (
    <div>
      <Greeting name="Jane" />
      <Greeting name="Tom" />
    </div>
  );
}

 

 

EX 2. 버튼 컴포넌트(텍스트와 색상 props)

function MyButton(props) {
  return (
    <button style={{ backgroundColor: props.color }}>
      {props.label}
    </button>
  );
}

function App() {
  return (
    <div>
      <MyButton label="Save" color="green" />
      <MyButton label="Cancel" color="red" />
    </div>
  );
}

 

출력은 ↓ 아래와 같이 됩니다.

🟩 첫 번째 버튼:
텍스트: Save

배경색: 초록색 (green)

🟥 두 번째 버튼:
텍스트: Cancel

배경색: 빨간색 (red)

 

여기서 궁금증 ! 🤔

 

style={{ backgroundColor: "red" }} 이거 어떻게 되는 건지?

🧚‍♀️ 리액트에서의 style 속성은:

 

HTML처럼 문자열 "background-color" 쓰는 게 아니라

camelCase 형식인 "backgroundColor"로 써야 돼!

그리고 값은 객체 형식({}) 으로 전달해야 돼.

 

 

 

EX 2. 프로필 카드

function ProfileCard(props) {
  return (
    <div style={{ border: "1px solid #ddd", padding: "10px" }}>
      <h3>{props.name}</h3>
      <p>Job: {props.job}</p>
      <p>Age: {props.age}</p>
    </div>
  );
}

function App() {
  return (
    <div>
      <ProfileCard name="Jane" job="Developer" age={28} />
      <ProfileCard name="Yuki" job="Designer" age={26} />
    </div>
  );
}

---

✨ 이렇게 기억해봐!

props = 컴포넌트한테 데이터를 넣어서 원하는 모습으로 보여주기
= 하나의 컴포넌트를 다양한 상황에 맞게 customizing 하는 도구!

---

✨ 그냥.. 파라미터라고 하면 안돼?

 

"props라고 하지 말고 그냥 '인자(parameter)'라고 하면 안 돼?" → 사실…
엄밀히 말하면 '맞아'! 근데 약간 결이 다르긴 해.

 

 

✨ props vs parameter (파라미터 / 인자)의 차이

 공통점:

- 둘 다 함수에 전달되는 값이라는 점에서 같아!

- 그래서 React 컴포넌트 = 함수 라고 보면, → props는 결국 그 함수의 파라미터(인자) 맞아.

 

✨ 그런데 왜 굳이 "props"라는 말을 따로 쓰는 걸까?

React에서는 컴포넌트끼리 데이터를 전달할 때 사용하는 방식으로
특정한 패턴이나 규칙이 있어서 그걸 강조하려고 props라는 말을 따로 써!

예를 들면:

- props는 읽기 전용 (read-only) → 자식이 바꾸면 안 됨!

- props는 부모 → 자식 흐름만 가능 (단방향)

- props는 컴포넌트 재사용성과 밀접한 개념

그래서 그냥 단순한 "파라미터" 이상의 의미가 생기는 거야.

 

---

✨ 읽기 전용?

자식 컴포넌트는 props를 받아서 보여주기만 해야 해.
→ "받은 거는 건들지 마~!" 라는 거야.

function Greeting(props) {
  props.name = "Jane"; // ❌ 이렇게 바꾸면 안 돼!
  return <h1>Hello, {props.name}</h1>;
}

 

✨ 단방향?

---

 

 

✨ 프롭스 전체 흐름

해당 이미지에서,

main jsx에는 profile 컴포넌트 

그리고 그 profile 컴포넌트 안에는, avatar 컴포넌트로 이루어져있다.

{developer && <p> 저는 개발 공부 하고 있습니다. </p>}

해당 파트는 리액트에서 자주 쓰는 **조건부 렌더링(Conditional Rendering)**이고

 

developer라는 변수가 true일 때만 <p>저는 개발 공부 하고 있습니다.</p> 이 문장을 화면에 보여줘.

developer가 false, null, undefined, 0, ""(빈 문자열) 등 Falsy한 값이면 아무것도 렌더링되지 않아.

 

삼항연산자도 자주 쓰인다!

{developer ? <p>공부 중!</p> : <p>아직 시작 안 했어요.</p>}

 

이건 if...else처럼, true일 때와 false일 때 둘 다 보여줘야 할 때 자주 씀

이렇게.. 줄을 나눠 보니, 이해하기 직관적이었다.

---

✨ 디스트럭처링 (=구조분해할당)

✓원래는 props를 이렇게 받잖아:

function WelcomeMessage(props) {
  return <h1>Welcome, {props.name}!</h1>;
}

→ 여기서 props는 객체야.
→ 그래서 props.name, props.age처럼 꺼내 써야 돼.

 

 

💡 디스트럭처링이 뭐냐면?

function WelcomeMessage({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

→ props라는 전체 객체 말고,

그 안에 필요한 속성만 꺼내서 직접 쓰는 방법이야.

 

✨ 기본값 설정 방법

 왜 필요할까!

<WelcomeMessage />처럼 name을 안 줬을 때도
에러 안 나고, 기본값으로 출력되게 하고 싶잖아!

 

방법 1: 파라미터에서 바로 기본값 주기

function WelcomeMessage({ name = "guest" }) {
  return <h1>Welcome, {name}!</h1>;
}

→ 이러면 name이 없을 때 "Welcome, guest!" 출력돼!

 

방법 2: defaultProps 사용 (옛날 방식, 아직도 씀!)

function WelcomeMessage({ name }) {
  return <h1>Welcome, {name}!</h1>;
}

WelcomeMessage.defaultProps = {
  name: "guest",
};

→ 이거는 함수 아래에 기본값을 따로 설정하는 방식이야!

 

 

 

아니야!
→ name이 안 들어왔을 때만 "guest"가 기본값으로 들어가!
→ 만약 부모가 name="Jane"으로 값을 줬으면 그 값이 우선이야.

예시를 보면 바로 이해 됩니다 :-)

function App() {
  return (
    <div>
      <WelcomeMessage name="Jane" />
      <WelcomeMessage />
    </div>
  );
}

function WelcomeMessage({ name = "guest" }) {
  return <h1>Welcome, {name}!</h1>;
}

Welcome, Jane!
Welcome, guest!

---

출처: 챗지피티, 구글링, 오즈 코딩 스쿨 자료