리액트(React)는 현대 웹 개발에서 가장 인기 있는 라이브러리 중 하나로, 컴포넌트를 기반으로 한 구조로 사용자 인터페이스(UI)를 구축하는 데 적합합니다. 이 블로그 글에서는 리액트에서 데이터 전달의 핵심 개념인 ‘props’에 대해 소개하고, 실제 예제를 통해 그 사용법을 자세히 살펴보도록 하겠습니다.

Props란 무엇인가?
Props는 ‘속성(properties)’의 줄임말로, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전송하는 방법을 의미합니다. 이는 리액트에서 단방향 데이터 흐름을 유지하는 데 필수적입니다. 자식 컴포넌트는 자신에게 전달된 props를 읽기만 할 수 있으며, 이 데이터는 컴포넌트를 재사용 가능하게 만드는 중요한 역할을 합니다.
Props의 구조
리액트에서 props는 객체 형태로 존재합니다. 부모 컴포넌트가 자식 컴포넌트에 props를 전달할 때, 다음과 같은 형태를 띱니다.
위 코드에서 ‘someProp’은 자식 컴포넌트가 받을 props의 이름이며, ‘value’는 그 값입니다. 자식 컴포넌트는 이 값에 접근하여 다양한 방식으로 활용할 수 있습니다.
Props를 사용하는 예제
다음은 기본적인 리액트 컴포넌트를 작성하고 props를 사용하는 방법을 보여주는 예제입니다.
import React from 'react'; function App() { return (); } function Greeting(props) { return ( ); } export default App;안녕하세요, {props.name}님!
당신의 나이는 {props.age}세입니다.
위의 코드는 ‘Greeting’ 컴포넌트가 ‘name’과 ‘age’라는 두 개의 props를 받아서 인사말을 렌더링합니다. 이처럼 props를 통해 다양한 정보를 쉽게 전달할 수 있습니다.
Props의 기본값 설정
때때로 부모 컴포넌트에서 props를 전달하지 않을 경우가 발생할 수 있습니다. 이럴 때 ‘defaultProps’를 사용하여 기본값을 지정할 수 있습니다.
Greeting.defaultProps = { name: "게스트", age: 25, };
이처럼 기본값을 설정하면, 부모 컴포넌트에서 props를 생략하더라도 기본적으로 정의된 값이 사용됩니다.
Props 타입 검증하기
리액트의 ‘PropTypes’ 패키지를 이용하면 props의 데이터 타입을 검증할 수 있습니다. 이는 코드의 안정성을 높이고, 잘못된 데이터가 전달되는 것을 방지하는 데 도움이 됩니다.
import PropTypes from 'prop-types'; Greeting.propTypes = { name: PropTypes.string, age: PropTypes.number, };
위와 같이 설정하면, ‘name’은 문자열, ‘age’는 숫자로 지정됩니다. 만약 다른 타입의 값이 전달된다면, 개발자 도구의 콘솔에 경고가 발생합니다.
실습: Props를 이용한 간단한 앱 만들기
마지막으로, props를 활용한 간단한 앱을 만들어보겠습니다. 아래의 코드는 사용자의 이름과 출생 연도를 받아 나이를 계산해주는 예제입니다.
import React from 'react'; function App() { return (); } function UserInfo({ name, birthYear }) { const currentYear = new Date().getFullYear(); const age = currentYear - birthYear; return ( ); } export default App;안녕하세요, {name}님!
당신의 나이는 {age}세입니다.
이 예제에서는 ‘UserInfo’ 컴포넌트가 ‘name’과 ‘birthYear’ props를 받아서 나이를 계산하여 출력합니다. 이를 통해 props의 활용도가 매우 높음을 알 수 있습니다.

결론
리액트에서 props는 컴포넌트 간의 데이터 전달을 가능하게 하여, 코드의 유연성과 재사용성을 높입니다. 기본값 설정과 PropTypes를 통해 안정성 있는 컴포넌트를 구축할 수 있으며, 이를 통해 더욱 효율적인 개발이 가능합니다. 이러한 요소들을 잘 활용하면, 더욱 풍부한 사용자 경험을 제공하는 웹 애플리케이션을 만들 수 있을 것입니다.
자주 찾으시는 질문 FAQ
리액트에서 props란 무엇인가요?
props는 부모 컴포넌트가 자식 컴포넌트에게 정보를 전달하는 방법을 의미하며, 리액트의 데이터 흐름이 단방향으로 유지될 수 있게 도와줍니다.
props의 기본값을 설정하려면 어떻게 하나요?
props의 기본값은 defaultProps를 사용하여 정의할 수 있습니다. 이를 통해 부모 컴포넌트에서 props를 전달하지 않았을 경우에도 미리 설정된 값이 사용됩니다.