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

소개

React 에서 props ( "properties"의 줄임말) 는 한 컴포넌트에서 다른 컴포넌트로 데이터를 전달하는 기본적인 개념입니다. 이를 통해 동적이고 재사용 가능한 컴포넌트를 만들 수 있습니다. props 를 함수에 전달하는 인자라고 생각하면 됩니다. 부모 컴포넌트가 자식 컴포넌트를 설정할 수 있게 해줍니다. props 는 읽기 전용이므로, 자식 컴포넌트는 받은 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 의 키이고, "John"은 해당 값입니다. 중괄호 {}로 감싸서 모든 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 등을 계속 작성하는 것은 특히 컴포넌트가 많은 prop 을 받을 경우 반복적일 수 있습니다. 더 깔끔하고 일반적인 접근 방식은 ES6 구조 분해 (destructuring) 를 사용하여 함수의 매개변수 목록에서 props 객체의 속성을 직접 추출하는 것입니다.

Greeting 컴포넌트를 구조 분해를 사용하도록 리팩터링해 보겠습니다.

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

파일을 다음과 같이 업데이트합니다.

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

export default Greeting;

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

파일을 저장하고 Web 8080 탭을 확인합니다. 출력은 정확히 동일해야 합니다 ("Hello, John!"). 하지만 이제 코드가 더 간결하고 읽기 쉬워졌습니다.

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

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

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

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 에서 prop 을 사용하여 재사용 가능하고 동적인 컴포넌트를 만드는 기본 사항을 배웠습니다.

이번 실습에서는 다음을 연습했습니다.

prop 을 사용하여 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법.
props 객체를 사용하여 자식 컴포넌트 내에서 prop 에 접근하는 방법.
구조 분해 (destructuring) 를 사용하여 더 깔끔하고 읽기 쉬운 코드를 작성하는 방법.
컴포넌트를 더 견고하게 만들기 위해 defaultProps로 prop 의 기본값을 설정하는 방법.

Prop 은 React 개발의 초석이며, 이를 숙달하는 것은 복잡한 애플리케이션을 구축하는 데 중요한 단계입니다. React 여정을 계속하면서 이러한 개념을 계속 연습하십시오.