React Props: 컴포넌트에 데이터 전달하기

소개

React에서 props(properties의 줄임말)는 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하기 위한 핵심 개념입니다. 이를 통해 동적이고 재사용 가능한 컴포넌트를 만들 수 있습니다. props는 함수에 전달하는 인자(argument)와 비슷하다고 생각하면 됩니다. 부모 컴포넌트가 자식 컴포넌트의 동작을 설정할 수 있게 해줍니다. props는 읽기 전용(read-only)이므로, 자식 컴포넌트는 전달받은 props를 직접 수정해서는 안 됩니다.

이번 실습에서는 다음 내용을 배웁니다:

부모 컴포넌트에서 자식 컴포넌트로 props를 정의하고 전달하는 방법
자식 컴포넌트 내에서 props에 접근하고 사용하는 방법
구조 분해 할당(destructuring)을 사용하여 코드를 깔끔하게 만드는 방법
props의 기본값을 설정하는 방법

시작해 봅시다!

함수형 컴포넌트에서 props 매개변수 정의하기

이번 단계에서는 새로운 자식 컴포넌트를 만들고 props를 받을 준비를 합니다. React의 함수형 컴포넌트는 전달된 모든 props를 포함하는 객체 하나를 인자로 받을 수 있습니다. 관례적으로 이 객체의 이름은 props라고 부릅니다.

먼저 프로젝트 디렉토리로 이동합니다. 설정 스크립트를 통해 my-app이라는 프로젝트가 이미 생성되어 있습니다.

cd ~/project/my-app

다음으로 프로젝트 의존성을 설치합니다.

npm install

이제 새로운 컴포넌트 파일을 생성합니다. 왼쪽 파일 탐색기에서 src 폴더로 이동한 뒤, src 안에 Greeting.jsx라는 이름의 새 파일을 만듭니다.

새로 만든 src/Greeting.jsx 파일에 다음 코드를 추가합니다. 이는 props 매개변수를 받는 간단한 함수형 컴포넌트를 정의하는 코드입니다.

function Greeting(props) {
  return <h2>Hello, World!</h2>;
}

export default Greeting;

다음으로, 이 새로운 컴포넌트를 메인 App 컴포넌트에서 가져와 사용해야 합니다. src/App.jsx 파일을 열고 다음과 같이 수정합니다:

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting />
    </>
  );
}

export default App;

이제 개발 서버를 실행하여 애플리케이션을 확인해 봅시다.

npm run dev -- --host 0.0.0.0 --port 8080

명령어를 실행한 후, 인터페이스 왼쪽 상단의 Web 8080 탭으로 전환하세요. "Welcome to My App"과 "Hello, World!"가 표시되는 애플리케이션을 확인할 수 있습니다.

부모로부터 name="John"과 같이 prop 값 전달하기

이번 단계에서는 부모 컴포넌트(App)에서 자식 컴포넌트(Greeting)로 데이터를 전달하는 방법을 배웁니다. 이는 JSX에서 속성(attribute)과 유사한 문법을 사용하여 수행합니다.

Greeting 컴포넌트에 사람의 이름을 전달하여 개인화된 메시지를 표시하도록 만들어 보겠습니다.

src/App.jsx 파일을 엽니다. <Greeting /> 줄을 수정하여 "John"이라는 값을 가진 name prop을 포함시킵니다.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
    </>
  );
}

export default App;

여기서 name="John"이 바로 prop입니다. name은 prop의 키(key)이고, "John"은 그 값(value)입니다. 중괄호 {}로 감싸면 어떤 JavaScript 표현식이든 prop 값으로 전달할 수 있습니다. 문자열의 경우 따옴표만으로 충분합니다.

파일을 저장하면 개발 서버가 자동으로 다시 로드됩니다. Web 8080 탭을 확인해도 출력은 아직 변하지 않았을 것입니다. 이는 prop을 전달하기는 했지만, Greeting 컴포넌트가 아직 이를 사용하고 있지 않기 때문입니다. 다음 단계에서 이 문제를 해결하겠습니다.

props.name을 사용하여 자식에서 prop 접근하기

이제 Greeting 컴포넌트가 name prop을 받고 있으니, 이를 사용해 보겠습니다. 자식 컴포넌트의 props 객체에는 부모로부터 전달된 모든 속성이 포함되어 있습니다. props.propertyName과 같이 점 표기법(dot notation)을 사용하여 접근할 수 있습니다.

src/Greeting.jsx 파일을 엽니다. props.name에 접근하여 개인화된 인사말을 표시하도록 수정하겠습니다. 중괄호 {}를 사용하여 JavaScript 표현식을 JSX 내에 직접 삽입하세요.

src/Greeting.jsx를 다음 코드로 업데이트합니다:

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

export default Greeting;

파일을 저장합니다. 이제 Web 8080 탭으로 전환하세요. 메시지가 "Hello, John!"으로 업데이트된 것을 볼 수 있습니다.

이것이 React에서 데이터가 흐르는 기본적인 방식입니다. 즉, props를 통해 부모에서 자식으로 데이터가 전달됩니다.

함수 매개변수에서 props 구조 분해 할당하기

props.name, props.age 등을 계속 작성하는 것은 특히 컴포넌트가 많은 props를 받을 때 번거로울 수 있습니다. 더 깔끔하고 일반적인 접근 방식은 ES6 구조 분해 할당(destructuring)을 사용하여 함수의 매개변수 목록에서 props 객체의 속성을 직접 꺼내는 것입니다.

Greeting 컴포넌트를 구조 분해 할당을 사용하도록 리팩토링해 봅시다.

src/Greeting.jsx를 열고 함수 시그니처를 수정합니다. props를 받는 대신, 구조 분해를 통해 name을 직접 가져오겠습니다.

파일을 다음과 같이 업데이트하세요:

function Greeting({ name }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

(props)를 ({ name })으로 변경함으로써, JavaScript에게 함수에 전달된 객체에서 name 속성을 추출하라고 지시하는 것입니다. 이제 props.name 대신 name을 직접 사용할 수 있으므로 컴포넌트 본문이 훨씬 깔끔해집니다.

파일을 저장하고 Web 8080 탭을 확인하세요. 출력 결과는 이전과 동일하게 "Hello, John!"이지만, 코드는 훨씬 간결하고 읽기 쉬워졌습니다.

기본 매개변수로 기본 props 설정하기

부모 컴포넌트가 필수 prop을 전달하지 않으면 어떻게 될까요? 값은 undefined가 되며, 이는 오류나 예상치 못한 UI 문제를 일으킬 수 있습니다. 이를 방지하기 위해 prop에 기본값을 지정할 수 있습니다.

함수형 컴포넌트의 경우, 함수 시그니처에서 기본 매개변수(default parameter)를 사용할 수 있습니다.

Greeting 컴포넌트에 기본 이름을 설정해 봅시다. src/Greeting.jsx를 열고 함수 매개변수를 수정하여 기본값을 포함시킵니다. 기본 이름을 "Guest"로 설정하겠습니다.

function Greeting({ name = "Guest" }) {
  return <h2>Hello, {name}!</h2>;
}

export default Greeting;

이제 테스트해 보겠습니다. src/App.jsx를 열고 또 다른 <Greeting /> 컴포넌트를 추가하되, 이번에는 name prop을 전달하지 마세요.

import Greeting from "./Greeting.jsx";

function App() {
  return (
    <>
      <h1>Welcome to My App</h1>
      <Greeting name="John" />
      <Greeting />
    </>
  );
}

export default App;

두 파일을 모두 저장합니다. Web 8080 탭으로 이동하세요. 이제 두 개의 인사말이 보일 것입니다:

"Hello, John!" (prop을 전달받은 컴포넌트)
"Hello, Guest!" (기본 prop을 사용한 컴포넌트)

이는 컴포넌트를 더 예측 가능하게 만들고 오류를 방지하는 견고한 방법입니다.

요약

실습을 완료하신 것을 축하합니다! React에서 props를 사용하여 재사용 가능하고 동적인 컴포넌트를 만드는 기초를 배웠습니다.

이번 실습에서 다룬 내용은 다음과 같습니다:

props를 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달하기
props 객체를 사용하여 자식 컴포넌트 내에서 props에 접근하기
구조 분해 할당을 사용하여 더 깔끔하고 읽기 쉬운 코드 작성하기
기본 매개변수를 사용하여 props의 기본값을 설정하고 컴포넌트를 더 견고하게 만들기

props는 React 개발의 초석이며, 이를 숙달하는 것은 복잡한 애플리케이션을 구축하는 데 있어 핵심적인 단계입니다. React 여정을 계속하면서 이러한 개념들을 꾸준히 연습해 보세요.