Props(1)

* 왜 props(property: 속성)을 사용할까?

  - 만약에 버튼(butten)이 여러개 일때, 버튼들의 style값을 한번에 수정하고 싶다면,

     하나씩 일일이 변경을 해줘야 되는데, props을 이용하면 공유가 가능해서 

     하나씩 다 수정하지 않아도 됨!

     물론 복붙해서 style을 일일이 넣을 수도 있겠지만, 좋은 방법이 아님.

 

function SaveBtn(){
  return <button style={{
        background: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0
      }}>
      Save
        </button>; 
}
function ConfirmBtn(){
  return <button>
		Confirm
        </button>; 
}

function App(){
  return(
    <div>
      <SaveBtn />
      <ConfirmBtn />
      </div>
    )}

SaveBtn에만 style속성을 적용했을 때

 

 

* Btn(props) 설정 후 변화

 

function Btn(props){
  console.log(props)
  return <button style={{
        background: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0
      }}>
        {props.banana}    ---- 이거를 넣어줘서, 
                               아래 사진에 있는 Save Changes랑 Continue가 나타나게 됨
        </button>; 
}
function App(){
  return(
    <div>
      <Btn banana="Save Changes"/>
      <Btn banana="Continue"/>
      </div>
    )}
    
    * App함수에 Btn props를 설정해줌으로서, 
      <Btn banana="Save Changes"/>
      <Btn banana="Continue"/>
	둘 다 Btn style값을 가지게 됨.

 

Btn이 두 곳 다 적용이 되었음

 

 

* props는 오브젝트이기 때문에
  function Btn(props) 대신에 function Btn({banana}) 이렇게 사용 가능

function Btn({banana, big}){
  console.log(banana, big)
  return <button style={{
        background: "tomato",
        color: "white",
        padding: "10px 20px",
        borderRadius: 10,
        border: 0,
        fontSize: big ? 18 : 16    <<< 만약 big이라면(true라면), 18px 
                                       big이 아니라면(true가 아니라면 = false라면) 16px
      }}>
        {banana}                   <<< Btn({banana}) 이렇게 { }중괄호로 오브젝트를 감싸주고 있어서,
                                       {props.banana}대신에 {banana}로 사용 가능
                                        
        </button>; 
}
function App(){
  return(
    <div>
      <Btn banana="Save Changes" big={true}/>
      <Btn banana="Continue" big={false}/>
      </div>
    )}
    
    ** Btn props를 중괄호{ } 를 사용하면 여러개 넣을 수도 있음.