ReactJS - 컴포넌트 생성 및 속성 사용

안녕하세요, 미래의 React 개발자 여러분! 오늘 우리는 React 컴포넌트와 속성의 세상으로 흥미로운 여정을 떠납니다. 여러분의 친절한 이웃 컴퓨터 선생님이자 저는 이 모험을 단계별로 안내해드리겠습니다. 그러니 마음에 드는 음료를 마시며 편안하게 앉아 있자고요. 시작해보겠습니다!

ReactJS - Creating Components using Properties

React 컴포넌트와 속성이란?

컴포넌트를 만들기 전에 먼저 그것이 무엇인지 이해해보겠습니다. 레고 블록으로 집을 짓는다고 상상해보세요. 각 레고 조각은 React 컴포넌트와 같습니다 - 웹 애플리케이션을 위한 재사용 가능한 빌딩 블록입니다. 그런데 이 레고 조각을 맞춤형으로 만들고 싶다면 어떻게 할까요? 이때 속성(또는 props)이 등장합니다. 속성은 각 레고 조각에 주는 특별한 지시로, 그것을 독특하게 만듭니다.

속성을 사용하여 컴포넌트 생성 방법

간단한 예제로 시작해보겠습니다. 우리는 다른 사람들에게 인사하는 "Greeting" 컴포넌트를 만들어보겠습니다.

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

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

이를 구분해보겠습니다:

Greeting 함수를 정의하고 props를 인자로 받습니다.
함수 내부에서 JSX를 반환합니다.
{props.name}을 사용하여 name 속성의 값을 삽입합니다.
App 컴포넌트에서 <Greeting />을 세 번 사용하여 각기 다른 name 속성을 전달합니다.

이 코드를 실행하면 세 개의 인사말이 각각 다른 이름으로 표시됩니다. 마치 친절한 로봇이 소개해준 사람마다 인사를 할 수 있는 것과 같습니다!

더 많은 속성 추가

이제 우리의 인사말을 더 흥미롭게 만들기 위해 몇 가지 더 속성을 추가해보겠습니다:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.name}!</h1>
<p>You are {props.age} years old and you love {props.hobby}.</p>
</div>
);
}

function App() {
return (
<div>
<Greeting name="Alice" age={25} hobby="painting" />
<Greeting name="Bob" age={30} hobby="playing guitar" />
</div>
);
}

여기서 우리는 age와 hobby 속성을 추가했습니다. age 속성에 대해 괄호 {}를 사용하는 이유는 숫자를 전달하기 때문입니다. 문자열의 경우 따옴표를 사용하지만, 숫자나 JavaScript 표현식의 경우 괄호를 사용합니다.

객체를 속성으로 사용

때로는 관련 데이터를 객체로 그룹화하는 것이 편리합니다. 우리는 Greeting 컴포넌트를 객체 속성을 사용하는 방식으로 리팩토링해보겠습니다:

function Greeting(props) {
return (
<div>
<h1>Hello, {props.person.name}!</h1>
<p>You are {props.person.age} years old and you love {props.person.hobby}.</p>
</div>
);
}

function App() {
const alice = { name: "Alice", age: 25, hobby: "painting" };
const bob = { name: "Bob", age: 30, hobby: "playing guitar" };

return (
<div>
<Greeting person={alice} />
<Greeting person={bob} />
</div>
);
}

이 버전에서 우리는 단일 person 객체를 속성으로 전달하여 각 사람에 대한 모든 정보를 포함합니다. 이는 많은 관련 속성을 가질 때 코드를 깨끗하게 유지하는 데 도움이 됩니다.

속성 분해

컴포넌트가 커지면서 props.을 자주 입력해야 할 수 있습니다. 속성 분해라는 멋진 기술이 코드를 더 깨끗하게 만들 수 있습니다:

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

이는 이전 예제와 같은 기능을 수행하지만 더 간결합니다. 우리는 person 속성에서 name, age, hobby를 추출하고 있습니다.

기본 속성

누군가가 컴포넌트에 속성을 전달하지 않으면 어떻게 될까요? 기본 값을 설정하여 오류를 피할 수 있습니다:

function Greeting({ person = { name: "Guest", age: "unknown", hobby: "mysteries" } }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

이제 우리가 <Greeting />을 속성 없이 사용하면 기본 값을 사용하게 됩니다.

Prop Types

앱이 커지면서 올바른 유형의 속성을 받고 있는지 확인하는 것이 좋습니다. React는 이를 위한 PropTypes 기능을 제공합니다:

import PropTypes from 'prop-types';

function Greeting({ person }) {
const { name, age, hobby } = person;
return (
<div>
<h1>Hello, {name}!</h1>
<p>You are {age} years old and you love {hobby}.</p>
</div>
);
}

Greeting.propTypes = {
person: PropTypes.shape({
name: PropTypes.string.isRequired,
age: PropTypes.number.isRequired,
hobby: PropTypes.string.isRequired
}).isRequired
};

이렇게 하면 잘못된 데이터 유형을 전달했을 때 경고를 받을 수 있습니다. 마치 친절한 비서가 당신의 작업을 두 번 확인해주는 것과 같습니다!

결론

축하합니다! React 컴포넌트와 속성의 기본을 배웠습니다. 기억하시라, 속성은 컴포넌트를 동적으로 만들고 재사용할 수 있게 해주는 지시입니다. 이는 React의 중요한 부분이며, 이를 마스터하면 React 여정에서 멀리 갈 수 있을 것입니다.

여기서 다루었던 방법의 빠른 참조 표입니다:

방법	설명
기본 속성	개별 값을 컴포넌트에 전달
객체 속성	단일 객체로 여러 값을 전달
속성 분해	속성을 깨끗하게 코드로 추출
기본 속성	누락된 속성에 대한 기본 값을 설정
Prop Types	속성의 유형을 확인

계속 연습하고 실험하고 만들어보세요! React는 강력한 도구이며, 이미 React 마스터로 가는 길에 오셨습니다. 행복하게 코딩하세요!

Credits: Image by storyset