[React] props (properties)

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.

https://react.vlpt.us/

---

1.props (properties)

props는 컴포넌트에 전달되는 데이터를 의미합니다.
부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다.
props는 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.

import React from 'react';

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

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

export default App;

• 읽기 전용: props는 읽기 전용이므로, 컴포넌트 내부에서 변경할 수 없습니다. 만약 컴포넌트에서 변경이 필요한 데이터라면, state를 사용해야 합니다.
  
  
• 재사용성: props를 사용하면 컴포넌트를 더 재사용 가능하게 만들 수 있습니다. 다양한 데이터를 props로 전달하여 같은 컴포넌트를 여러 용도로 사용할 수 있습니다.
  
  
• 구조 분해 할당: props 객체를 구조 분해 할당을 사용하여 더 간결하게 사용할 수 있습니다.

 

 

2.여러 props 전달

import React from 'react';

// 자식 컴포넌트
function User(props) {
  return (
    <div>
      <h1>{props.name}</h1>
      <p>Age: {props.age}</p>
      <p>Email: {props.email}</p>
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return <User name="Alice" age={25} email="alice@example.com" />;
}

export default App;

 

 

 

3.함수 전달

import React from 'react';

// 자식 컴포넌트
function Button(props) {
  return <button onClick={props.onClick}>{props.label}</button>;
}

// 부모 컴포넌트
function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return <Button onClick={handleClick} label="Click Me" />;
}

export default App;

 

 

4.defaultProps 

props 를 지정하지 않았을 때 기본적으로 사용 할 값을 설정

 

class Greeting extends Component {
  render() {
    return <h1>Hello, {this.props.name}!</h1>;
  }
}

// 기본 props 설정
Greeting.defaultProps = {
  name: 'Guest'
};

 

 

 

5.props.children

중첩된 자식 요소들을 나타냅니다.
부모 컴포넌트가 자식 컴포넌트를 렌더링할 때, 자식 요소들을 props.children을 통해 접근할 수 있습니다.

 

import React from 'react';

// 자식 요소를 받는 컴포넌트
function Container(props) {
  return (
    <div className="container">
      {props.children}
    </div>
  );
}

// 부모 컴포넌트
function App() {
  return (
    <Container>
      <h1>Hello, world!</h1>
      <p>This is a paragraph.</p>
    </Container>
  );
}

export default App;