#4.0 Props

코코·2023년 11월 20일
NomadCodersPropsReact
0

nomadcoders-react

목록 보기
3/5
post-thumbnail

4.0 Props

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn(props) {
      // Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
      // function Btn({text, big}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            fontSize: props.big ? 18 : 16,
          }}
        >
          {props.text}
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn text="Save Btn" big={true} />
          <Btn text="Confirm Btn" big={false}/>
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

4.1 Memo

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn(props) {
      // Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
      // function Btn({text, big}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음
      console.log(props.text, 'was rendered')
      return (
        <button
          onClick={props.onClick}
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            fontSize: 10,
          }}
        >
          {props.text}
        </button>
      );
    }
    // 재사용된 컴포넌트중 props 가 변경되지 않은것은 재렌더링 되지않게끔 도와줌
    // 부모에 state가 변동이 될시 부모에 모든 자식들이 재렌더링 되는것을 방지
    const MemorizedBtn = React.memo(Btn) 
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <MemorizedBtn text={value} onClick={changeValue} />
          <MemorizedBtn text="Confirm Btn" big={false} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

4.2 Prop Types

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize = 14 }) { // = 14 기본값 지정 props로 전달되지않으면 기본값 14가 주어짐
      // Props는 Obj 형태로 컴포넌트의 프로퍼티를통해 인자 값으로 들어온다
      // function Btn({text, fontSize}) Obj의 키값으로 {} 를 넣어 바로 꺼낼 수 있음(ES6부터)
      // function Btn(props) || function Btn({text, fontSize})
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            borderRadius: 10,
            border: 0,
            fontSize,
          }}
          // fontSize는 변수지만 실제 button의 property명과 동일함으로 바로 써줘도 인식함
          // ex) fontSize: fontSize === fontSize
        >
          {text}
        </button>
      );
    }
    // prop-types package
    // props의 타입을 지정해 벨리데이션해주는 기능
    Btn.propTypes = {
        text: PropTypes.string.isRequired,
        fontSize: PropTypes.number
        // fontSize: PropTypes.number.isRequired -> isRequired 무조건 있어야하는 props
    }
    // 재사용된 컴포넌트중 props 가 변경되지 않은것은 재렌더링 되지않게끔 도와줌
    // -> 부모에 state가 변동이 될시 부모에 모든 자식들이 재렌더링 되는것을 방지
    // const MemorizedBtn = React.memo(Btn)
    // <MemorizedBtn text={value} />
    // <MemorizedBtn text="test" />
    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        <div>
          <Btn text={value} fontSize={25} />
          <Btn text={12} fontSize={"t"} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

4.3 Recap

정리

  • Prop
    • 컴포넌트에 선언된 props에 Data Type을 지정하여 정의
  • PropType
    • 컴포넌트에 선언된 props에 Data Type을 지정하여 정의
    • isRequired를 통해 필수값 정의
profile
코코
이전 포스트

#3 [2021 UPDATE] STATE

다음 포스트

#5 [2021 UPDATE] CREATE REACT APP

0개의 댓글