[ React ] 자주 사용하는 코드 구성 요소 5가지_객체, 속성, 속성값, 인자, 매개변수

 

 

🧩 HTML/JSX에서는 속성(attribute)
🧠 JavaScript 함수에서는 인자(argument) + 매개변수(parameter)
⚛️ React에서는 속성이 props가 되어 함수의 인자처럼 전달됨

1. 자바스크립트의 객체

객체 안에 정의된 함수(동작)으로 데이터를 표현하고 조작하는데 필수적인 요소

표현법] 객체명.속성명           
            객체명["속성명"]

---

1.1 객체 (Object)

키(key): 값(value) 쌍의 집합

- **관련된 데이터(속성)와 기능(메서드)** 를 하나로 묶는 자료형

const 객체이름 = { 키1: 값1, 키2: 값2, ... }; 

 

- 예시 ]

const user = {
  name: "챗지회피티",
  age: 25
};

 

---

1.2 속성 (attribute)

객체의 타입

- HTML / JSX

- 예시 ]

user.name  // 여기서 "name"이 속성

// 예시
<input type="text" placeholder="이름" />
// type과 placeholder는 속성(attribute)임

---

1.3 Props (속성값)

속성에 연결된 실제 데이터(값) : 데이터를 저장할 이름

 

- 예시 ]

const user = {
  name: "챗지회피티",   // 속성: name, 속성값: "챗지회피티"
  age: 25              // 속성: age, 속성값: 25
};

 

React 에서는 부모가 자식 컴포넌트에게 데이터 전달하는 역할

- React component ]

// 부모 컴포넌트
function App() {
  return (
    <div>
      <UserCard name="챗지회피티" age={25} />  // 속성과 속성값
    </div>
  );
}

// 자식 컴포넌트
function UserCard(props) {
  return (
    <div>
      <h2>이름: {props.name}</h2>  // 자식 컴포넌트에서 받아온 객체
      <p>나이: {props.age}살</p>
    </div>
  );
}

---

2. 컴포넌트 구성요소

Parameter(매개변수): 함수를 만들 때 사용
Argument(인자): 함수를 부를 때 사용

 

예시 ]

요소	역할
매개변수 = 그릇 이름 (bowl)	"어떤 재료든 받아줄 준비가 된 그릇"
인자 = 실제 재료 (라면, 계란)	"그 그릇에 담기는 실제 음식"

 

function cook(ramen) { 
	console.log("라면을 끓입니다: " + ramen); 
} 

cook("진라면");

---

2.1 < "인자" /> (argument)

함수에 직접 전달하는 "값"

<Component propName="value" />
형태로 전달된 값

 

- 함수 호출 시 ]

function Greeting({ name }) {            // name → 매개변수 (받는 쪽)
  return <h1>안녕하세요, {name}님!</h1>;
}

<Greeting name="챗지회피티" />            // "챗지회피티" → 인자 (보내는 값)

---

2.2 ({ 매개 변수 }) (parameter)

인자를 받아주는 변수 자리

function Component(props)
또는 ({ propName }) 형태

 

- 함수 정의 시 ]

function sayHello(who) {      // 매개변수: who
  console.log("Hello " + who);
}

sayHello("챗지회피티");        // 인자: "챗지회피티"