[ReactJS로 영화 웹 서비스 만들기] Chapter04. PROPS

IRISH·2024년 3월 29일
React

ReactJS-Movie-Web-Service

목록 보기
3/23
post-thumbnail

4.0 Props

  • 학습일자 : 2024.03.23

⇒ Props

  • props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식.
  • 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 객체가 들어가게 됨.
  • 하나의 버튼을 만들어서 props를 이용해 버튼의 스타일을 관리해서 재사용 할 수 있게 됨.

⇒ 코드

<!DOCTYPE html>
<html>
  <body>
    <div id="root"></div>
  </body>

  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- babel js -->
  <script type="text/babel">
    const root = document.getElementById("root");

    function Btn({ text, big }) {
      return (
        <button
          style={{
            backgroundColor: "teal",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
            marginRight: "5px",
            fontSize: big ? 18 : 16,
          }}
        >
          {text}
        </button>
      );
    }

    const App = () => {
      return (
        <div>
          <Btn text="Save Changes" big={true} />
          <Btn text="Continue" />
        </div>
      );
    };

    ReactDOM.render(<App />, root);
  </script>
</html>
  • 버튼의 style property(속성)을 사용
  • style={{backgroundColor: "tomato",}}
    • 2개 열고 일반적인 HTML방식으로 써주면 됨. 그러나 너무 길어짐
    • 이런 스타일들을 모두 갖는 단 한가지의 컴포넌트로 만들어 재사용 가능
  • 내가 만들고 사용하는 모든 컴포넌트들은 function Btn() -> 괄호로 argument(인자)를 받는다.
    • argument의 이름은 마음대로 지어줄 수 있다.
    • 보통은 props라고 부른다.

⇒ 결과

4.1 Memo

  • 학습일자 : 2024.03.23

⇒ Memo

  • React.memo()
    • 컴포넌트가 React.memo()로 wrapping 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이징(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이징(Memoizing)된 내용을 재사용한다.

⇒ 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>replit</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");

    function Btn({ buttonName, changeName }) {
      console.log(buttonName, "redered");
      return (
        <button
          onClick={changeName}
          style={{
            backgroundColor: "teal",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
            marginRight: "5px",
          }}
        >
          {buttonName}
        </button>
      );
    }
    const MemorizedBtn = React.memo(Btn);
    const App = () => {
      const [name, setName] = React.useState("Save Changes");
      const changeName = () => setName("Revert Changes");
      return (
        <div>
          <MemorizedBtn buttonName={name} changeName={changeName} />
          <MemorizedBtn buttonName={"Confirm"} />
        </div>
      );
    };

    ReactDOM.render(<App />, root);
  </script>
</html>
  • props에 function도 보낼 수 있음
    • 이것은 JSX로 html 태그 자체에 이벤트 리스너를 넣는것과는 전혀 다른 것
    • 그저 이벤트를 실행시키는 함수가 프로퍼티로 들어간 것임.
    • prop은 그냥 부모에서 자식으로 데이터를 넘길 때 사용하는 argument의 역할이니까!
  • 불필요한 re-render는 React.memo()로 관리할 수 있음
    • 부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남.
    • 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음.
    • 아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 될듯.

⇒ 결과

  • Save Changes 클릭 이전

  • Save Changes 클릭 이후

4.2 Prop Types

  • 학습일자 : 2024.03.23

⇒ Prop Types

  • 리액트는 파라미터를 잘 못 넘겨도 확인할 수 없는 문제점이 존재한다.
  • 이런 문제를 줄이기 위해서 PropTypes라는 모듈의 도움을 받을 수 있다.
  • type과 다르게 입력 되었을 경우 warning을 뜨게 할수 있고, parameter 에 값을 넣지 않는 경우 경고 메시지를 띄울수 있다.

⇒ 코드

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>replit</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.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({ buttonName, fontSize = 16 }) {
      return (
        <button
          style={{
            backgroundColor: "teal",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: "10px",
            marginRight: "5px",
            fontSize,
          }}
        >
          {buttonName}
        </button>
      );
    }
    Btn.propTypes = {
      buttonName: PropTypes.string.isRequired,
      fontSize: PropTypes.number,
    };
    const App = () => {
      return (
        <div>
          <Btn buttonName={"Save Changes"} fontSize={20} />
          <Btn buttonName={"Confirm"} />
        </div>
      );
    };

    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>
  • react script[react-dom script X] 부분에서 production.min.js를 development.js로 변경
  • 강의에서는 저번 강의였던 memo를 사용하지 않았는데, 만약 사용하고 싶다면
    • const MemorizedBtn = React.memo(Btn); 라고 선언한 후에
    • propTypes설정하실 때 MemorizedBtn.propTypes = {}; 로 설정!!!
  • function Btn({ buttonName, fontSize = 16 })
    • 파라미터를 buttonName, fontSize → 이렇게 2개를 가져온다.
      • fontSize로 전달받은 파라미터가 없다면, 기본 default 값으로 16을 할당하겠다는 의미이다.

⇒ 결과

4.3 Recap

  • 학습일자 : 2024.03.23

⇒ 학습 내용

  • Prop 은 component 에 보내지는 argument 이다.
  • PropType을 이용해서 보내지는 prop 에 type을 정의 할 수 있다.
    • 정의 하는 이유는 잘못된 type의 prop 이 보내지는 것을 방지하기 위해서 입니다.
    • PropType을 정의 했을 때 React는 에러메세지를 통해서 잘못된 type이 보내지고 있다고 알려준다.
profile
IRISH
#Software Engineer #IRISH
이전 포스트

[ReactJS로 영화 웹 서비스 만들기] Chapter03. STATE

다음 포스트

[ReactJS로 영화 웹 서비스 만들기] Chapter05. CREATE REACT APP

0개의 댓글