ReactJS - 새로 만든 컴포넌트 사용하기

소개

안녕하세요, 미래의 React 개발자 여러분! 이 흥미로운 여정에서 여러분의 가이드로서 기쁜 마음으로 인사드립니다. 컴퓨터 과학을 몇 년 동안 가르쳐온 경험으로 말씀드리건대, 컴포넌트를 이해하는 것은 레고 블록으로 만드는 것을 배우는 것과 같습니다. 한 번 익혀보면 놀라운 것들을 만들 수 있게 됩니다!

React 컴포넌트란 무엇인가?

컴포넌트를 사용하기 전에 그것이 무엇인지 이해해 보겠습니다. 컴포넌트는 사용자 인터페이스의 재사용 가능한 블록으로 생각하시면 됩니다. 레고 블록을 창작물의 다른 부분에서 재사용할 수 있는 것처럼, 동일한 React 컴포넌트를 애플리케이션의 여러 부분에서 사용할 수 있습니다.

컴포넌트의 종류

React에는 두 가지 주요한 컴포넌트 유형이 있습니다:

1. 함수형 컴포넌트
2. 클래스형 컴포넌트

이 튜토리얼에서는 함수형 컴포넌트에 집중하겠습니다. 왜냐하면 그것이 더 간단하고 최신이기 때문입니다.

첫 번째 컴포넌트 만들기

간단한 컴포넌트를 만들어 보겠습니다. 인사 메시지를 표시하는 "Greeting" 컴포넌트를 만들어보겠습니다.

function Greeting() {
return <h1>Hello, React learner!</h1>;
}

이것은 간단해 보이지만, 많은 것들이 이루어지고 있습니다:

• Greeting이라는 함수를 정의합니다
• 함수는 JSX(HTML와 비슷한 문법)를 반환합니다
• JSX는 화면에 렌더링될 것을 나타냅니다

새로 만든 컴포넌트 사용하기

이제 우리의 Greeting 컴포넌트를 애플리케이션에서 사용해 보겠습니다!

function App() {
return (
<div>
<Greeting />
<p>Welcome to our React tutorial!</p>
</div>
);
}

여기서 이루어지고 있는 일은 다음과 같습니다:

• App 컴포넌트(우리 애플리케이션의 주요 컴포넌트)를 가지고 있습니다
• App 내부에서 우리의 Greeting 컴포넌트를 사용하고 있습니다
• 컴포넌트는 HTML 태그처럼 사용됩니다

이 코드를 실행하면 "Hello, React learner!" 뒤에 "Welcome to our React tutorial!"가 표시됩니다.

프롭스를 사용한 컴포넌트

컴포넌트가 프롭스를 사용하여 동적으로 만들어질 때 더욱 강력해집니다. 프롭스는 컴포넌트의 파라미터입니다.

우리의 Greeting 컴포넌트를 이름을 받을 수 있도록 수정해 보겠습니다:

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

이제 다음과 같이 사용할 수 있습니다:

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

이렇게 하면 다음과 같이 표시됩니다:

Hello, Alice!
Hello, Bob!

이것이 멋지지 않나요? 우리는 다양한 사람들에게 인사할 수 있는 재사용 가능한 컴포넌트를 만들었습니다!

여러 프롭스를 사용한 컴포넌트

한 걸음 더 나아가 더 복잡한 컴포넌트를 만들어 보겠습니다. 사용자 정보를 표시하는 UserCard 컴포넌트를 만들어보겠습니다.

function UserCard(props) {
return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

이제 다음과 같이 사용할 수 있습니다:

function App() {
return (
<div>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
</div>
);
}

컴포넌트를 중첩하기

React의 가장 강력한 기능 중 하나는 컴포넌트를 중첩할 수 있는 능력입니다. 여러 UserCard 컴포넌트를 사용하는 UserList 컴포넌트를 만들어 보겠습니다:

function UserList() {
return (
<div>
<h1>User List</h1>
<UserCard name="Alice" age={28} occupation="Developer" />
<UserCard name="Bob" age={35} occupation="Designer" />
<UserCard name="Charlie" age={42} occupation="Manager" />
</div>
);
}

이제 App 컴포넌트는 UserList를 단순히 사용할 수 있습니다:

function App() {
return (
<div>
<Greeting name="React Learner" />
<UserList />
</div>
);
}

컴포넌트 메서드

컴포넌트는 자신의 메서드를 가질 수도 있습니다. UserCard 컴포넌트에 생년을 계산하는 메서드를 추가해 보겠습니다:

function UserCard(props) {
const calculateBirthYear = () => {
const currentYear = new Date().getFullYear();
return currentYear - props.age;
};

return (
<div className="user-card">
<h2>{props.name}</h2>
<p>Age: {props.age}</p>
<p>Birth Year: {calculateBirthYear()}</p>
<p>Occupation: {props.occupation}</p>
</div>
);
}

결론

축하합니다! React 컴포넌트의 세계로 첫 걸음을 내디디셨습니다. 우리는 간단한 컴포넌트 생성, 프롭스 사용, 컴포넌트 중첩, 그리고 컴포넌트 메서드 추가에 대해 다루었습니다.

기억해 두세요, 연습이 완성입니다. 자신만의 컴포넌트를 만들어 보세요, 다양한 프롭스를 실험해 보세요, 그리고 무엇을 만들 수 있을지 보세요. 얼마 지나지 않아 복잡한 UI를 쉽게 구축할 수 있게 될 것입니다!

이제 우리가 만든 컴포넌트의 빠른 참조 표를 제공합니다:

컴포넌트 이름	프롭스	설명
Greeting	name	인사 메시지 표시
UserCard	name, age, occupation	사용자 정보 표시
UserList	None	여러 UserCard 컴포넌트를 표시

계속 코딩하고, 계속 배우고, 가장 중요한 것은 React를 즐기세요!

Credits: Image by storyset