REACT_props

<props 사용하기>

-props : 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용한다

props를 전달받은 자식 컴포넌트에서는 데이터를 수정할 수 없다

데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 한다

 

-App.js

import React from 'react';
import './App.css'; 
//App.css가 App.js 보다 더 한 단계 상위 폴더에 있다면  
//'./..App.css'

import Props from './R017_Props'

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>css 적용하기</p>
      <Props props_val="THIS IS PROPS"/>
    </div>
  );
}

export default App;

 

-R017_Props.js

import React, {Component} from 'react';

class R017_Props extends Component {
    render() {
        let props_value = this.props.props_val;
        props_value += '  from App.js';
        return(
            <div>{props_value}</div>
        )
    }
}
export default R017_Props;

 

결과