ReactJS - Properties (props): A Beginner's Guide

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React에서 가장 기본적인 개념之一的 속성, 즉 우리가 애정어로 부르는 "props"에 대해 깊이 탐구해보겠습니다. 프로그래밍에 처음 도전하는 분이라면 걱정 마세요 - 저는 수많은 학생들을 가르친 경험을 바탕으로 단계별로 안내해드리겠습니다. 이 흥미로운 여정을 함께 시작해봅시다!

Props는 무엇인가요?

코드로 뛰어들기 전에 props가 무엇인지 이해해보겠습니다. 집을 짓는 것을 상상해보세요 (우리의 React 애플리케이션). Props는 각 방(컴포넌트)이 어떻게 생겨야 하고 무엇을 포함해야 하는지 알려주는 도면과 같습니다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법입니다.

Props 사용하기

간단한 예제로 시작해보겠습니다. 개인 맞춤 메시지를 표시하는 Greeting 컴포넌트를 만들겠습니다.

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

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

이 예제에서 name은 Greeting 컴포넌트로 전달되는 prop입니다. 이를 해부해보겠습니다:

1. 우리는 props 객체를 기대하는 Greeting 컴포넌트를 정의합니다.
2. Greeting 내부에서 props.name을 사용하여 name prop에 접근합니다.
3. App 컴포넌트 내에서 Greeting을 두 번 사용하여 다른 name props를 전달합니다.

이 코드를 실행하면 두 개의 인사가 표시됩니다: "Hello, Alice!"와 "Hello, Bob!".

여러 Props 전달하기

Props은 단순히 문자로 제한되지 않습니다. Greeting 컴포넌트를 확장하여 더 많은 정보를 포함시켜보겠습니다:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Age: {props.age}</p>
<p>Favorite Color: {props.color}</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={28} color="blue" />
<Greeting name="Bob" age={32} color="green" />
</div>
);
}

이제 우리는 세 가지 props를 전달하고 있습니다: name, age, 그리고 color. age prop에 대해 괄호 {}를 사용하는 이유는 숫자를 전달하기 때문입니다.

기본 Props

때로는 prop가 제공되지 않을 경우 대체 값을 가지고 싶을 때가 있습니다. 이럴 때 기본 props가 유용합니다. Greeting 컴포넌트를 수정하여 기본 나이를 설정해보겠습니다:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>Age: {props.age}</p>
</div>
);
}

Greeting.defaultProps = {
age: 25
};

function App() {
return (
<div>
<Greeting name="Alice" age={28} />
<Greeting name="Bob" />
</div>
);
}

이 예제에서 우리가 age prop를 제공하지 않는 경우 (Bob의 경우), 기본적으로 25가 적용됩니다.

Props와 State 비교

이제 props를 이해했으므로, 또 다른 중요한 React 개념인 state와 비교해보겠습니다. 간단한 비교입니다:

Props	State
부모에서 자식으로 전달	컴포넌트 내에서 관리
읽기 전용	변경 가능
컴포넌트 간 소통 도움	컴포넌트 동적화

간단한 카운터 컴포넌트를 통해 이를 실제로 보겠습니다:

import React, { useState } from 'react';

function Counter(props) {
const [count, setCount] = useState(props.initialCount);

return (
<div>
<p>Count: {count}</p>
<button onClick={() => setCount(count + 1)}>Increment</button>
</div>
);
}

function App() {
return (
<div>
<Counter initialCount={0} />
<Counter initialCount={10} />
</div>
);
}

이 예제에서:

• initialCount은 prop입니다. App에서 Counter로 전달되며 변경되지 않습니다.
• count은 state입니다. initialCount의 값을 초기화하지만 setCount 함수를 사용하여 변경할 수 있습니다.

결론

Props는 React의 기본적인 부분으로, 유연하고 재사용 가능한 컴포넌트를 만들 수 있게 해줍니다. 그들은 당신의 React 레시피를 독특하고 맛있게 만드는 비밀 재료입니다!

기억해 두세요:

1. Props는 부모에서 자식으로 흐릅니다.
2. 그들은 읽기 전용입니다 - props를 직접 변경하지 마세요!
3. 기본 props를 사용하여 대체 값을 설정할 수 있습니다.
4. Props는 데이터 전달에 사용하며, state는 데이터 관리에 사용합니다.

React 여정을 계속하면서, 당신은 점점 더 복잡하고 흥미로운 방법으로 props를 사용하게 될 것입니다. 하지만 걱정 마세요 - 연습하다 보면 자연스럽게 익숙해질 것입니다. 자전거 타는 것처럼, 한 번 익혀지면 절대 잊지 않습니다!

coding과 learning을 계속하며, 가장 중요한 것은 즐기는 것입니다! React는 놀라운 라이브러리이며, 당신이 그것을 발견하게 되기를 기대합니다. 다음 번에 만날 때까지, 행복한 React 개발을 기원합니다!

Credits: Image by storyset