React props

WEB-STUDY

React props

비숑주인 2024. 8. 18. 21:12

리액트(React)에서 props는 컴포넌트 간에 데이터를 전달하는 메커니즘이다. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 주로 사용되며, 이 데이터는 함수의 매개변수처럼 자식 컴포넌트에서 접근할 수 있다.

1. Props의 개념

props는 "properties"의 줄임말로, 컴포넌트에 전달되는 입력값이다. 리액트에서 props는 읽기 전용이며, 자식 컴포넌트는 전달받은 props를 변경할 수 없다. 이러한 특성 덕분에 리액트 애플리케이션에서 데이터의 흐름이 예측 가능하고 일관되게 유지된다.

2. Props의 사용법

2.1. 기본 사용법

props는 부모 컴포넌트에서 자식 컴포넌트로 전달된다. 자식 컴포넌트는 전달받은 props를 이용해 화면을 렌더링할 수 있다.

import React from 'react';

// 자식 컴포넌트
function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

// 부모 컴포넌트
function App() {
  return <Greeting name="Alice" />;
}

export default App;

2.2. Destructuring을 이용한 Props 접근

ES6의 구조 분해 할당(destructuring)을 이용해 props를 더 간결하게 사용할 수 있다.

import React from 'react';

// 자식 컴포넌트
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

// 부모 컴포넌트
function App() {
  return <Greeting name="Alice" />;
}

export default App;

위 예제는 구조 분해 할당을 이용해 props 객체에서 name을 직접 추출한다. 이 방법을 사용하면 코드가 더 간결해지고 가독성이 높아진다.

2.3. 여러 개의 Props 전달

컴포넌트는 여러 개의 props를 전달받을 수 있으며, 각 props는 컴포넌트 내부에서 자유롭게 사용할 수 있다.

import React from 'react';

// 자식 컴포넌트
function UserCard({ name, age, location }) {
  return (
    <div>
      <h2>{name}</h2>
      <p>Age: {age}</p>
      <p>Location: {location}</p>
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return <UserCard name="Alice" age={30} location="Seoul" />;
}

export default App;

위 예제에서 App 컴포넌트는 UserCard 컴포넌트에 name, age, location이라는 세 가지 props를 전달하고 있다. UserCard 컴포넌트는 이 값을 이용해 사용자의 정보를 출력한다.

2.4. Props의 기본값 설정

컴포넌트에 props가 전달되지 않은 경우 기본값을 설정할 수 있다. 기본값은 컴포넌트의 defaultProps 속성을 이용해 정의할 수 있다.

import React from 'react';

// 자식 컴포넌트
function Greeting({ name }) {
  return <h1>Hello, {name}!</h1>;
}

Greeting.defaultProps = {
  name: 'Stranger',
};

// 부모 컴포넌트
function App() {
  return <Greeting />;
}

export default App;

위 예제에서 App 컴포넌트는 Greeting 컴포넌트에 name prop을 전달하지 않았지만, Greeting 컴포넌트는 defaultProps를 통해 기본값 'Stranger'를 사용해 "Hello, Stranger!"를 렌더링한다.

3. Props와 State의 차이

props는 컴포넌트 외부에서 전달되는 데이터이며, 컴포넌트는 이 데이터를 변경할 수 없다. 반면 state는 컴포넌트 내부에서 관리되는 데이터로, 컴포넌트가 state를 변경할 수 있다. 즉, props는 읽기 전용 데이터이고, state는 동적인 데이터이다.

요약

props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.
props는 읽기 전용이며, 자식 컴포넌트는 이를 변경할 수 없다.
ES6의 구조 분해 할당을 사용하면 props를 더 간결하게 사용할 수 있다.
props의 기본값은 defaultProps를 통해 설정할 수 있다.
prop-types를 사용해 props의 타입을 검증할 수 있다.