ReactJS - Stateless Components: A Beginner's Guide

안녕하세요, 미래의 React 마법사 여러분! 오늘 우리는 React 컴포넌트의 세계로 흥미로운 여정을 떠납니다. 특히 무상태 컴포넌트에 중점을 맞춰보겠습니다. 프로그래밍 초보자라도 걱정 마세요; 저는 친절한 안내자로서 단계별로 설명해드릴게요. 그럼 커피 한 잔 (또는 차, 만약 그게 당신의 취향이라면)을 챙기고, 함께 들어보겠습니다!

ReactJS - Stateless Component

React에서의 Components는 무엇인가요?

무상태 컴포넌트에 대해 이야기하기 전에, 먼저 React에서 컴포넌트가 무엇인지 이해해보겠습니다. 컴포넌트를 레고 블록으로 생각해보세요. 레고 조각으로 복잡한 구조를 만들 수 있는 것처럼, React 컴포넌트를 사용하여 복잡한 웹 애플리케이션을 만들 수 있습니다.

컴포넌트의 유형

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

상태를 가진 컴포넌트 (클래스 컴포넌트)
상태를 가지지 않은 컴포넌트 (기능 컴포넌트)

오늘 우리는 무상태 컴포넌트에 집중하겠지만, 상태를 가진 컴포넌트에 대해 간단히 설명해보겠습니다.

상태를 가진 컴포넌트: 간단한 개요

상태를 가진 컴포넌트, 또는 클래스 컴포넌트는 React의 스위스 아미리 knife와 같습니다. 상태 관리를 포함한 많은 기능을 수행할 수 있습니다. 간단한 예제를 보겠습니다:

import React, { Component } from 'react';

class Greeting extends Component {
constructor(props) {
super(props);
this.state = { name: 'World' };
}

render() {
return <h1>Hello, {this.state.name}!</h1>;
}
}

이 예제에서 Greeting은 자신의 name 상태를 관리하는 상태를 가진 컴포넌트입니다. 하지만 때로는 이렇게 많은 기능이 필요하지 않을 때가 있으며, 그때가 무상태 컴포넌트가 등장하는 순간입니다!

무상태 컴포넌트: 간결함의 귀환

무상태 컴포넌트, 또는 기능 컴포넌트는 React의 효율적인 노동자와 같습니다. 그들은 하나의 임무를 수행합니다: 받은 props를 기반으로 UI를 렌더링합니다. 예제를 보겠습니다:

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

이게 정말 쉬워요! 이 컴포넌트는 이전의 클래스 컴포넌트와 같은 역할을 수행하지만 코드가 훨씬 적습니다. 그림자에 맞춰 벽에이미지를 걸 때 도끼와 일반 hammer를 사용하는 차이처럼, 때로는 간단한 것이 더 나을 수 있습니다!

무상태 컴포넌트를 사용하는 이유

간결함: 읽고 쓰기가 더 쉬워요.
성능: React가 상태 관리를 설정할 필요가 없어서 약간 더 빠르요.
테스트 가능성: 이동 부품이 적어서 더 쉽게 테스트할 수 있어요.
재사용성: 더 집중적이기 때문에 재사용이 더 쉬워요.

첫 번째 무상태 컴포넌트 만들기

블로그 포스트 미리보기에 대한 간단한 무상태 컴포넌트를 만들어보겠습니다:

const BlogPostPreview = ({ title, excerpt, author }) => {
return (
<div className="blog-post-preview">
<h2>{title}</h2>
<p>{excerpt}</p>
<span>By {author}</span>
</div>
);
};

이렇게 되고 있습니다:

BlogPostPreview라는 함수를 정의합니다.
이 함수는 객체를 인자로 받아 title, excerpt, author를 즉시 구조 분해합니다.
함수는 JSX를 반환하여 컴포넌트가 렌더링해야 할 내용을 설명합니다.

이 컴포넌트를 사용하려면:

const App = () => {
return (
<div>
<BlogPostPreview
title="React is Awesome!"
excerpt="React가 웹 개발 세계를 휩쓸고 있는 이유를 배워보세요."
author="Jane Doe"
/>
</div>
);
};

Props: 무상태 컴포넌트의 생명력

Props(프롭스)는 우리가 무상태 컴포넌트에 데이터를 전달하는 방법입니다. 그들은 셰프에게 주는 재료처럼, 컴포넌트는 이 props를 받아 맛있는 UI로 "요리"합니다!

보다 복잡한 예제를 만들어보겠습니다: 사용자 프로필 카드.

const ProfileCard = ({ name, job, avatar, socialLinks }) => {
return (
<div className="profile-card">
<img src={avatar} alt={`${name}'s avatar`} />
<h2>{name}</h2>
<p>{job}</p>
<div className="social-links">
{socialLinks.map((link, index) => (
<a key={index} href={link.url}>
{link.platform}
</a>
))}
</div>
</div>
);
};

여기서 우리는 더 복잡한 props를 사용하고 있습니다. 이를 간단히 설명해보겠습니다:

name, job, avatar, socialLinks를 props에서 구조 분해합니다.
이 값을 사용하여 JSX를 채웁니다.
socialLinks에 대해 map 함수를 사용하여 각 소셜 플랫폼에 대한 링크를 생성합니다.

이 컴포넌트를 사용하려면:

const App = () => {
const socialLinks = [
{ platform: 'Twitter', url: 'https://twitter.com/johndoe' },
{ platform: 'LinkedIn', url: 'https://linkedin.com/in/johndoe' }
];

return (
<ProfileCard
name="John Doe"
job="React Developer"
avatar="https://example.com/avatar.jpg"
socialLinks={socialLinks}
/>
);
};

무상태 컴포넌트의 최선의 관행

다음은 무상태 컴포넌트를 더욱 빛나게 만드는 팁입니다:

집중력을 유지하세요: 각 컴포넌트는 하나의 일을 잘 수행해야 합니다.
prop-types를 사용하세요: 이 튜토리얼에서는 다루지 않았지만, prop-types는 props의 유형을 검사하여 버그를 잡는 데 도움이 됩니다.
기본 props를 사용하세요: 필요할 때 props에 기본 값을 제공하세요.
props를 구조 분해하세요: 코드를 깨끗하고 읽기 쉽게 만듭니다.

결론

축하합니다! 지금 당신은 React 무상태 컴포넌트의 세계로 첫 걸음을 뗐습니다. 어떤 새로운 기술을 배울 때처럼, 연습이 완벽을 만듭니다. 자신의 무상태 컴포넌트를 만들어보고, 다양한 props를 실험해보세요. 그리고 가장 중요한 것은, 즐겁게 코딩하세요!

다음 강의에서는 이 컴포넌트를 실제 애플리케이션에 어떻게 사용하는지 더 깊이 탐구해보겠습니다. 그때까지, 행복한 코딩을 기원합니다!

메서드	설명
`props`	컴포넌트에 전달된 속성을 포함하는 객체
`useState`	함수 컴포넌트에 React 상태를 추가하는 훅
`useEffect`	함수 컴포넌트에서 사이드 효과를 수행하는 훅
`useContext`	React 컨텍스트를 구독하는 데 사용되는 훅, 중첩을 피합니다
`useReducer`	함수 컴포넌트에서 더 복잡한 상태 로직을 관리하는 훅
`useCallback`	함수를 메모이제이션하여 성능을 최적화하는 훅
`useMemo`	비싼 계산을 메모이제이션하는 훅
`useRef`	렌더링을跨하는 가변 참조를 만드는 훅

Credits: Image by storyset

이전 튜토리얼:

ReactJS - 상태 관리 API

다음 튜토리얼:

ReactJS - React Hooks를 사용한 상태 관리