[React] props

 

 

React의 기능에는 props라는 부모와 자식 컴포넌트 간의 통신을 할때, 부모 컴포넌트가 자식 컴포넌트한테 원하는 데이터를 보내는것을 의미한다.

 

이러한 점은 커스텀 버튼 이나 다양한 함수로서 사용이 편리하다 .하지만  props는 오브젝트로 오직 한개의 props만 보낼 수 있고, props 오브젝트안의 파라미터 구성은 여러개 가능하다.

 

props는 기본 방법이 있고, 단축어 방법이 있다. 

 

<기본 방법>

 function Btn(props) {
      console.log(props.text, "이 렌더링되었습니다.");
      return (
        <button
          onClick={props.changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            margin: "10px",
          }}
        >
          {props.text}
        </button>
      );
    }
const MemorizedBtn = React.memo(Btn);
    function App() {
      const [value, setValue] = React.useState("Front Buttons");
      const changeValue = () => setValue("Back Changes");

      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue} />
          <MemorizedBtn text="ConfirmButton" />
        </div>
      );
    }
ReactDOM.render(<App />, root);

 

<단축어 방법>

    function Btn({text, changeValue}) {
      console.log(text, "이 렌더링되었습니다.");
      return (
        <button
          onClick={changeValue}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            margin: "10px",
          }}
        >
          {text}
        </button>
      );
    }

 

오브젝트 props를 생략하고 파라미터 부분에서 해당 오브젝트로 바로 접근( Function Btn({}) 하여

조금 더 간결하게 작성할 수 있다.