React props

props가 뭐임 ?

props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 한다.
컴포넌트는 뭔디? return값으로 JSX코드를 갖고있는 함수를 컴포넌트라함.

function thisIsComponent (){
	return JSXcode~
}

개발하다가 버튼은 5개를 만들어야하는데!

function btn1(){
	return <button>Save Changes</button>
}
function btn2(){
	return <button>Commit</button>
}
.
.
.

각 버튼에 스타일을 주려면 뭐 CSS로도 가능하겠지만, JS코드로 각각 버튼마다 같은 스타일을 지정해주는건 솔직히 귀찮음. 만약 5개의 버튼 모두 같은 스타일에 버튼 컨텐츠만 바뀌어야 한다면? props를 쓰면됨.

function Btn(props) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {props.Babooraeyo}
        </button>
      );
    }
    
 function App() {
      return (
        <div>
          <Btn Babooraeyo="Save Changes"/>
          <Btn Babooraeyo="Countinue" />
        </div>
      );
    }

<input type ="text" ></input>타입을 텍스트로 지정한것처럼
<Btn Babooraeyo="Save Changes"/>난 버튼에 바보래요라는 인자(argument)를주고, 거기따 버튼에 표기할 글을 적어줌. 그리고 그 인자는 Btn함수로 넘겨받을꺼임. console.log(props)해주면?

객체를 리턴해줌 wow 개미쳤네. 그럼 인자 10개 넣어도 다 객체로 받아준다는 뜻임.console.log(props.Babooraeyo)하면 내가 버튼안에 들어가길 원하고 원했던 글자가 튀어나올꺼임. 객체로 반환하면 걍 모든속성을 인자로 갈음할 수 있다는 뜻이네.. 예를들어..

function Btn(Babooraeyo, big) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
        	fontSize: big? 18 : 12,
          }}
        >
          {props.Babooraeyo}
        </button>
      );
    }
    
 function App() {
      return (
        <div>
          <Btn Babooraeyo="Save Changes" big ={true}/>
          <Btn Babooraeyo="Countinue" big = {false}/>
        </div>
      );
    }

big이라는 인자를 넣구 바보래요랑 빅 둘다 받아서 넘겨준담에 style의 fontSize를 삼항연산자로 건들 수 있는거. (true/false는 걍 삼항연산자로 다 됨)