[React] 리액트 컴포넌트에 Props 적용

리액트 컴포넌트에 Props 적용해보기  

title="WEB"이라는 속성을 사용할 수 있도록 약속된 jsx의 기호는 {this.props.title} 입니다.

HTML에서 속성이라고 하는 것은 리액트에서 "props" 라고 합니다.

 

import React, { Component } from 'react';
import './App.css';


class Subject extends Component {
  render() {
      return (     
      <header>
        <h1 className='title'>{this.props.title}</h1>
        <p className="sub">{this.props.sub}</p>
      </header>
        )
  }
}
class App extends Component {
  render() {
    return(
      <div className='App'>
        <Subject title="hi" sub="welcome" />
        <Subject title="WEB" sub="world wide web!"></Subject>
        <Subject />
      </div>
    )
  }
}

export default App;

 

출력화면

 

 

HTML 속성과 React의 Props 차이

구분	Html	React
명칭	속성(attribute)	props (properties)
예시	<h1 title="WEB">	<Header title="WEB" />
사용 방식	문자열 그대로	{props.title} 같이 JS 표현식으로

 

리액트에서  props를 사용하는 이유? 

컴포넌트 데이터를 전달 및 재사용 하기 위해서입니다.

Props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달할 때 사용하는 방법입니다. 

 

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

<Greeting name="Alice" />

 

• 여기서 "Alice"는 부모가 자식(Greeting)에게 넘긴 데이터예요.
• props.name으로 받아서 사용할 수 있어요.

 

출처: https://www.boostcourse.org/web231/lecture/1387422

웹 프론트엔드 시작하기 (리액트&리덕스)