props!

props는 property의 약자로, 부모에게 받아온 데이터입니다.

 

리액트의 Data Flow는 단방향 형식으로 부모에서부터 자식으로 이동하기 때문에 거꾸로 올라갈 수 없습니다.

 

따라서 props에 있는 데이터들은 수정이 불가능하며 오직 안에있는 값을 꺼내서 사용할수만 있습니다.

 

---

 

props는 위와 같이 정의되어 있다.

 

내가 생각한 props는 App.js는 메인으로 건재할테니 하위 파일에다가 값을 전달해주는

 

그리고 매개변수처럼 props를 받아오는 것이다.

 

아래 코드를 보면 이해 갈 것이다.

 

아래는 App.js

import React,{useEffect,useState} from 'react';
import Counter from './components/Counter';


function App() {
  const[buttonName,setButtonName]=useState('state클릭');

  const change=()=>{
    setButtonName("바뀌게")     //state 값으로 변경되게
  }
  return (
      <div className="App">
       {/* <h1>
         good!
       </h1>
       <button onClick={incre}>click</button> {count}
       <button onClick={incre1}>click</button> {count1} */}
       <Counter></Counter> <br></br>
       <Counter click="내가 선택됨"></Counter> <br></br>       //click 이라고 전해준다
       <Counter click={buttonName}></Counter> <br></br>		  //state 디폴트값
       <button  onClick={change}>클릭</button>				//함수로 값
      </div>
  );
  }
export default App;

 

Counter.js

 

import React from 'react';
import { useState } from 'react';

const Counter =(props)=>{						//props를 받아옴
    const [count,setCount]=useState(0);

    const incre=()=>{
        setCount(count+1);
    };

    const clickString = props.click || '클릭';		props.click이 있다면 그값,없다면 클릭
    return (
    <>
        <button onClick={incre}>{clickString}</button>
        {count}
    </>
    );
};
export default Counter;