React 배워보기 (2. PROPS)

props

• Btn 컴포넌트를 재사용 하기 위해서 props를 이용 할 수 있다.
  • 에 value="Save Changes"라고 쓰면 Btn에서 props로 value값을 객체 형태로 받을 수 있다
    • 굳이 변수 명이 value일 필요는 없다. banana도 될 수 있고 tomato도 될 수 있다.
    • console로 props를 찍어보면 { value:"Save Changes" } 이 나온다.
    • btn인자에서 바로 value를 쓸 수 있게 Btn( { value } )형태로 쓸 수 있다.
  • Btn onClick={changeValue} /> 이것은 이벤트 리스너를 붙인 것이 아닌, 컴포넌트에 onClick이라는 프롭을 전달한 것이다. 여기서 onClick은 이벤트가 아니라 단순히 props의 이름이다.
    • 이벤트를 쓰기위해선 해당 컴포넌트에서 props로 changeValue을 받고 onClick이벤트를 설정 해주면 된다.

		function Btn({ value, changeValue }) {
        return (
          <button
						onClick={changeValue}
            style={{
              backgroundColor: "tomato",
              color: "white",
              padding: "10px 20px",
              border: 0,
              borderRadius: 10,
            }}
          >
            {value}
          </button>
        );
      }
      function App() {
        const [value, setValue] = React.useState("Save Changes");
				const changeValue = () => setValue("Revert Changes");
        return (
          <div>
            <Btn value="Save Changes" onClick={changeValue} />
            <Btn value="Confirm" />
          </div>
        );
      }
      const root = document.querySelector("#root");
      ReactDOM.render(<App />, root);

memo

• 밑의 코드에서 Save Changes Btn을 누르면 콘솔이 두번 찍힌다
  • setValue를 해주기때문에 리랜더링 되는데 이로인해 Btn 컴포넌트가 두개다 실행되기 때문

		  function Btn({ text, changeValue }) {
        console.log(text);
        return (
          <button
            onClick={changeValue}
            style={{
              backgroundColor: "tomato",
              color: "white",
              padding: "10px 20px",
              border: 0,
              borderRadius: 10,
            }}
          >
            {text}
          </button>
        );
      }
      function App() {
        const [value, setValue] = React.useState("Save Changes");
        const changeValue = () => setValue("Revert Changes");
        return (
          <div>
            <Btn text={value} changeValue={changeValue} />
            <Btn text="Confirm" />
          </div>
        );
      }
      const root = document.querySelector("#root");
      ReactDOM.render(<App />, root);

• 이는 사이트가 느려질 수 있는 원인이 된다
  • React.memo를 사용하면 해결가능!
  • React.memo는 props가 변경되지 않는다면 해당 컴포넌트는 리랜더링을 하지 않는다.

    • React.memo()의 인자로 컴포넌트를 넣어주고 만든 변수를 컴포넌트로 쓰면 된다.

      		function Btn({ text, changeValue }) {
              console.log(text);
              return (
                <button
                  onClick={changeValue}
                  style={{
                    backgroundColor: "tomato",
                    color: "white",
                    padding: "10px 20px",
                    border: 0,
                    borderRadius: 10,
                  }}
                >
                  {text}
                </button>
              );
            }
            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="Confirm" />
                </div>
              );
            }
            const root = document.querySelector("#root");
            ReactDOM.render(<App />, root);

Props Types

• 컴포넌트의 props에 타입 검사를 하려면 다음과 같이 특별한 프로퍼티인 propTypes를 선언할 수 있다.

  • 앱이 커짐에 따라 타입 검사를 활용하면 많은 버그를(bug) 잡을 수 있다.

  • 컴포넌트.propTypes으로 객체를 생성하여 타입을 설정 할 수 있다.
    - 타입뿐만아니라 isRequired를 설정 할 수 있다.
    - text: PropTypes.string.isRequired
    - default를 설정 해 주고 싶으면 { text, fontSize = 16 } 와 같이 설정하면 된다.

    		function Btn({ text, fontSize = 16 }) {
            return (
              <button
                style={{
                  backgroundColor: "tomato",
                  color: "white",
                  padding: "10px 20px",
                  border: 0,
                  borderRadius: 10,
                  fontSize,
                }}
              >
                {text}
              </button>
            );
          }
          Btn.propTypes = {
            text: PropTypes.string.isRequired,
            fontSize: PropTypes.number,
          };
          function App() {
            return (
              <div>
                <Btn text="Save Changes" fontSize={18} />
                <Btn text="Confirm" />
              </div>
            );
          }
          const root = document.querySelector("#root");
          ReactDOM.render(<App />, root);