2021. 12. 02. (목) React JS 연습_2

# 학습 전 나의 상태

저번시간에 state에 대해 배웠는데 음.. 생각보다 이해가 잘 되었다고해야할까..?

어쨋든.. 리액트 네이티브 수업을 들으면서 리액트를 접해서 그런지 그래도 어느정도 이해는 되는 것 같다.

오늘은 props에 대해 공부할 것이다.

 

 

# 오늘의 학습 내용

Props

부모 컴포넌트에서 자식 컴포넌트로 데이터를 보냄

Component 란?

어떤 JSX를 반환하는 함수

 

버튼으로 props를 전달하는 예제

  function Btn ({btnText, changeValue}) {
    return ( 
      <button
        onClick={changeValue}
        style={{
          backgroundColor: "skyblue",
          color: "#fff",
          padding: "10px 15px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {btnText}
      </button>
    )
  }

  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Rivert Changes");
    return (
      <div>
        <Btn btnText={value} changeValue={changeValue} />
        <Btn btnText="Continue" />
      </div>
    );
  }
  const root = document.getElementById('root');
  ReactDOM.render(<App />, root);

위와 같은 코드에서는 버튼이 만들어지면서 렌더가 되고

onClick 이벤트가 실행되면서 Save Changes 버튼이 Rivert Changes 버튼으로 변경되고

다시 렌터링하게 된다. 이때 Contiue 버튼까지 다시 렌더링하게 되는데

state기 변경되지 않는 것은 리렌더링 되지 않도록 하기 위해 memo()를 사용할 수 있다.

아래 변경된 코드이다.

  function Btn ({btnText, changeValue}) {
    console.log(btnText, "was rendered")
    return ( 
      <button
        onClick={changeValue}
        style={{
          backgroundColor: "skyblue",
          color: "#fff",
          padding: "10px 15px",
          border: 0,
          borderRadius: 10,
        }}
      >
        {btnText}
      </button>
    )
  }
  const MemorizedBtn = React.memo(Btn);
  function App() {
    const [value, setValue] = React.useState("Save Changes");
    const changeValue = () => setValue("Rivert Changes");
    return (
      <div>
        <MemorizedBtn btnText={value} changeValue={changeValue} />
        <MemorizedBtn btnText="Continue" />
      </div>
    );
  }
  const root = document.getElementById('root');
  ReactDOM.render(<App />, root);

처음 버튼이 만들어질 때 렌더가 되고

Save Changes 버튼을 눌러 이벤트가 발생하면

Rivert Changes 버튼만 렌더링하게 된다.

이렇게 하는 이유는 state가 변경되는 것만 렌더링해 속도저하를 막을 수 있기 때문이다.

 

Prop types

어떤 타입의 prop을 받고 있는지 체크해준다.

예를 들어 props를 잘못 전달했다고 가정을 해서 확인해보자

function Btn ({btnText, fontSize}) {
    return ( 
      <button
        style={{
          backgroundColor: "skyblue",
          color: "#fff",
          padding: "10px 15px",
          border: 0,
          borderRadius: 10,
          fontSize,
        }}
      >
        {btnText}
      </button>
    )
  }
  function App() {
    return (
      <div>
        <Btn btnText="Save Changes" fontSize={18} />
        {/* 아래와 같이 잘 못 전달 되었다면.. */}
        <Btn btnText={18} fontSize="Save Changes" />
      </div>
    );
  }
  const root = document.getElementById('root');
  ReactDOM.render(<App />, root);

이렇게 버튼이 생성되고 에러는 따로 뜨지 않는다.

그래서 prop types를 확인하여 문제가 되는 부분을 확인할 수 있다.

  function Btn ({btnText, fontSize}) {
    return ( 
      <button
        style={{
          backgroundColor: "skyblue",
          color: "#fff",
          padding: "10px 15px",
          border: 0,
          borderRadius: 10,
          fontSize,
        }}
      >
        {btnText}
      </button>
    )
  }
  Btn.propTypes = {
    btnText: PropTypes.String,
    fontSize: PropTypes.number,
  }
  function App() {
    return (
      <div>
        <Btn btnText="Save Changes" fontSize={18} />
        {/* 아래와 같이 잘 못 전달 되었다면.. */}
        <Btn btnText={18} fontSize="Save Changes" />
      </div>
    );
  }
  const root = document.getElementById('root');
  ReactDOM.render(<App />, root);

이런 경고창을 볼 수 있다.

 

 

 

# 학습을 마치며

공부를 하다보니 기억이 새록새록 ~ 

초급인 내용이지만 기초를 잘 쌓으면서 올라가야

나중에 어려운 걸 했을 대 잘 받아들이겠지?

하지만 아직 까진 어려운 것은 없는 것 같다.

그래도 잘 배워서 까먹진 말자..