리액트 기초 : Props

props를 사용하면 component간에 데이터를 공유할 수 있다.

 

 

Props은 리액트에서 속성값을 나타내는 키워드이다.

이를 이용하면 다른 컴포넌트에 변경되는 값을 가져올 수 있다.

 

1) Subject 컴포넌트에 정의하고 싶은 속성명과 값을 지정한다.

import './App.css';
import { Component } from 'react';
import Subject from './Subject';
import Toc from './Toc';
import Content from './Content';

class App extends Component {
  render(){
    return (
      <div className="App">
        <Subject title = "WEB" sub="world wide web!!!"/>
        <Toc/>
        <Content/>
      </div>
    );
  }
}

export default App;

2) Subject 컴포넌트에서 {this.prop.속성명}을 사용하여 해당 값을 사용한다. (jsx 문법)

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

class Subject extends Component {
  render(){
    return (
      <header>
          <h1>{this.props.title}</h1>
          {this.props.sub}
      </header>
    );
  }
}

export default Subject;

this.props.title 의 의미

this : 현재 클래스의

.props : 속성 중

.title : title 속성을 가져와라

 

3) 결과

 

속성명을 변경하면 이에 제목과 부제목이 변경된다.

<Subject title ="동물" sub="고양이"/>	<Subject title ="제목" sub="부제목"/>	<Subject title ="커피" sub="라떼"/>