03. props라고 적기엔 제목이 너무 짧아서.

또 다시 아득바득 튀어나온, 문과식 제목 짓기. props말고 마땅한 제목이 생각이 나지 않았는데 props만 적으면 제목이 너무 짧잖아.

Props
React의 props는 컴포넌트 간에 데이터를 전달하는 방법

props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 이를 통해 받은 데이터를 읽을 수 있지만, 직접 수정할 수는 없다. props는 객체 형태로 전달되며, 이를 통해 컴포넌트의 재사용성과 유지 보수성이 높아진다.

text, boolean , function등 다양한 값을 보낼 수 있다.

Props 강의를 처음 들었을 때는, 사실 좀 놀랐다. Vue에서 배웠던 Props와 너무나도 달랐기 때문이다. 확실히 지금까지의 공부로 느끼는 것은 React는 정말 많이 Component적이다. (내가 이 말을 용법에 맞게 잘 사용하고 있는지는 모르겠지만 말이다.) Vue에서의 props와 emits은 조금 복잡해가지고, 나는 pinia를 주로 사용하여 대부분의 상황들을 처리했던 것 같은데, React의 props는 생각보다 더 많이 간편하다는 생각을 했음. 바로 예시코드를 확인해보자.

 function Btn({text, bool}){
    console.log(bool)
    return <button 
    style={{
      backgroundColor : "tomato",
      color : "white",
      padding : "10px 20px",
      border: 0,
      borderRadius : 10,
      fontSize: bool ? 18 : 12,
    }}>{text}</button>
  }

  function App() {
    return (
      <div>
        <Btn text = "Save Changes" bool={true}/>
        <Btn text = "Continue" bool={false}/>
      </div>
    );
  }

function Btn("여기가 props다.")
그리고 html에서 (정확히는 JSX겠지만) 태그로 붙인 text, 와 bool은, 내가 임의로 붙인 변수?겠지만, 이건 props로 사용된다. 정확한 용법으로는 props.text, props.bool로 구분되겠지만 간단하게 바로 경로를 지정할 수 있다는 것이 장점인듯.
++추가로, 저번의 Posting에서도 그랬듯이, JSX에서는 JS 문법이 사용가능하다! fontSize 부분을 보면 확인 가능하다.

const MemorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Revert Changes");
    return (
      <div>
        <MemorizedBtn text = {value} changeValue={changeValue}/>
        <MemorizedBtn text = "Continue" />
      </div>
    );
  }

위 코드는 function changeValue 를 props 한 것. 사실 일부분만 가져오긴 함.
또한 React.memo를 활용하여 Props가 일어나지 않는 Component들은 다시 Rendering 하지 않는 기능을 사용할 수 있도록 수정하긴 하였다. 이 memo기능을 활용하여, 페이지의 과부하를 막는거다.

Btn.propTypes = {
  text: PropTypes.string.isRequired,
  fontSize: PropTypes.number,
}

propTypes를 통해 한 Component의 props의 타입을 지정할 수 있다. props의 개수가 많아진다면 입력하는 값이헷갈리게 될 수도 있는데 그것을 방지하는 것. 필수값이라면 isRequired를 사용해, 필수로 넣어야할 값을 지정해줄 수 있다.