6. React - props(속성값)

ㅁ props는 propertis 약자로 속성값 전달

---

1. App.js - props 보내는곳

import './App.css';

import Hello from './component/Hello';  // Hello component 추가

function App() {

  return (

    <div className="App">

      <Hello age={10}/>   

      <Hello age={20}/>

      <Hello age={30}/>

    </div>

  );

}

export default App;

2. Hello.js - props 받는곳

export default function Hello(props){        

    console.log(props);    

    return(

        <div>            

            <h1>{props.age}</h1>            

        </div>

    );

}

3. Hello.js - props 받는곳

export default function Hello({ age }){                

    return(

        <div>            

            <h1>{age}</h1>                        

        </div>

    );

}

---

ㅁ props 값 변경하기

ㅇ App.js - props 값 보내는곳, Hello.js - props 값 받는곳

Hello.js

import { useState } from 'react';

export default function Hello(props){        

    console.log(props);    

    const [age, setAge] = useState(props.age);      // State상태값에서 props넘겨준 .age 변수

    return(

        <div>            

            <h1>{age}</h1>            

            <button onClick={() =>{

                setAge(age + 1);

            }}>

            Change

            </button>

        </div>

    );

}

ㅇ 버튼클릭 할때마다 useState 상태값 정의로 인해 기본 넘겨받은 값 10에서 +1씩 증가

---