React : Props

<angeLog/>·2024년 2월 19일

React

REACT

목록 보기

6/25

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

props
부모 컴포넌트로부터 자식컴포넌트에 data를 전달할 수 있는 방법.

"save Changes"기능의 btn과 "confirm"기능을 하는 btn을 만든다고 해보자.

function SaveBtn() {
  return <button>save Changes</button>;
}
function ConfirmBtn() {
  return <button>Confirm</button>;
}
function App() {
  return (
    <div>
      <SaveBtn />
      <ConfirmBtn />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

JSX의 Style Property(속성)

jsx에서 style속성을 사용하기 위해서는 {{중괄호 2개}}안에서 camelCase로 작성하면 된다.

function SaveBtn() {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
      }}
      >
      save Changes
    </button>
  );
}
function ConfirmBtn() {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
      }}
      >
      Confirm
    </button>
  );
}
function App() {
  return (
    <div>
      <SaveBtn />
      <ConfirmBtn />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

예쁘게 되긴 했는데 코드가 너무 길어진다.
공통된 스타일을 가진 한개의 컴포넌트를 만들어 재사용하면 훨씬 간결한 코드를 가질 수 있다.

//Btn이라는 component를 생성하고 style속성을 사용하여 디자인한다.
function Btn() {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
      }}
      ></button>
  );
}

function App() {
  return (
    <div>
      //생성한 Btn 컴포넌트를 최상위 컴포넌트인 App에 render.
      <Btn />
      <Btn />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

동일한 스타일의 버튼 두개가 만들어 진 것을 볼 수 있다.
그렇다면 각 버튼의 이름은 어떻게 표현 할 수 있을까?

Props 사용하기

부모 컴포넌트인 App에서 자식 컴포넌트인 Btn에 각각 banana, big이라는 정보를 만들어준다.

//부모요소 App
function App() {
  return (
    <div>
      //App에 render된 자식요소 Btn.
      //banana, big은 부모요소 App이 자식요소인 Btn에 전달하고자 하는 정보.
      <Btn banana="save Changes" big={true} />
      <Btn banana="confirm" big={false} />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

부모 컴포넌트에서 render된 자식 컴포넌트에 전달하고자 하는 정보를 작성하면, props를 통해 자식요소에 해당 정보가 전달된다.
props는 Btn 컴포넌트로 전달하는 첫번째이자 유일한 argument(전달인자)이다.

function Btn(props) {
  console.log(props);
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
        fontSize: props.big ? 24 : 16,
      }}
      >
      {props.banana}
    </button>
  );
}

props는 객체로 들어오기 때문에, props의 key에 따른 value가 필요하다면 props.key로 꺼내서 사용해야한다.

전체코드

function Btn(props) {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
        fontSize: props.big ? 24 : 16,
      }}
      >
      {props.banana}
    </button>
  );
}
function App() {
  return (
    <div>
      <Btn banana="save Changes" big={true} />
      <Btn banana="confirm" big={false} />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

Short Cut
props.key로 정보를 꺼내는 것이 싫다면 props를 처음부터 꺼내서 넘겨주면 된다.

function Btn({ banana, big }) {
  return (
    <button
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
        fontSize: big ? 24 : 16,
      }}
      >
      {banana}
    </button>
  );
}
function App() {
  return (
    <div>
      <Btn banana="save Changes" big={true} />
      <Btn banana="confirm" big={false} />
    </div>
  );
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);

하지만 나는 shortCut보다는 props객체로 넘기고 사용하는게 더 좋다.

props, 함수도 전달 할 수 있어!

text, boolean 말고도 함수도 props로 전달할 수 있다.

function App() {
  // 초기값이 "save Changes"인 useState 생성.
  const [value, setValue] = React.useState("save Changes");
  //changeValue가 어떤작동을 해야할지 적어주고,
  const changeValue = () => {
    setValue("revert Changes");
  };
  return (
    <div>
      // banana라는 인자에는 value,
      //potato라는 인자안에 changeValue라는 전달요소를 적어준다.
      <Btn banana={value} popato={changeValue} />
      <Btn banana="confirm" />
    </div>
  );
}

여기에서 popato가 바로 자식요소에게 전달되는 event인데 이것이 eventListner는 아니다.
작동해야하는 event를 담고 있는 argument전달인자 일 뿐이다.

//App의 자식요소인 Btn에 App이 전달하고자 하는 potato를 props로 전달하고
function Btn({ banana, popato }) {
  return (
    <button
      //eventListenr인 onClick에 popato를 담아준다.
      onClick={popato}
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
        fontSize: 16,
      }}
      >
      {banana}
    </button>
  );
}

Props 왜 쓴다구?

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

그런데 콘솔을 찍어보면 좀 이상한 부분이 있다.
react에서는 변경한 state만 update한다고 배웠는데 그렇다면 콘솔도 변경된 state만 찍혀야하는 것 아닐까? 하지만 이것은 당연하다. 부모요소인 App의 기준으로 생각해보면 된다. Btn을 감싸고 있는 부모요소App은 자식요소인 Btn에 의해 변화를 겪게 되기때문에 전체가 다시 그려지기 때문에 console또한 변경되지 않은 banana까지 찍히는 것이다.

굳이 변경되지 않은 state까지 다시 그려줘야해?
react는 그 부분또한 완벽하게 보완하는 방법을 제시한다.

React.memo()

React.memo()
state가 변경되지 않는 component는 다시 그려지지 않도록 react에게 기억(Memorize)하도록 명령하는 react Hook.

컴포넌트 Btn을 React.memo()를 이용해 MemorizeBtn라는 이름의 새로운 컴포넌트로 변경한다.

function Btn({ banana, popato }) {
  console.log(banana, "render됐음");
  return (
    <button
      onClick={popato}
      style={{
        backgroundColor: "tomato",
        color: "white",
        padding: "19px 20px",
        border: "none",
        borderRadius: 10,
        fontSize: 16,
      }}
      >
      {banana}
    </button>
  );
}
const MemorizeBtn = React.memo(Btn);

부모요소App안의 자식요소Btn또한 새로운 컴포넌트인 MemorizeBtn로 변경한다.

function App() {
  const [value, setValue] = React.useState("save Changes");
  const changeValue = () => {
    setValue("revert Changes");
  };
  return (
    <div>
      <MemorizeBtn banana={value} popato={changeValue} />
      <MemorizeBtn banana="confirm" />
    </div>
  );
}

변경된 state만 console에 찍힌다.

propTypes

propTypes는 react가 제공하는 props의 type을 체크하는 기능이다.

//스크립트에 라이브러리 추가
<script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>

function App() {
  const [value, setValue] = React.useState("save Changes");
  const changeValue = () => {
    setValue("revert Changes");
  };
  return (
    <div>
      //정상적인 props가 담긴 Btn
      <Btn banana={value} popato={changeValue} fontSize={24} />
      
      //테스트를 위해 Btn의 props들을 잘못된 타입으로 넣어보았다.
      <Btn banana={14} fontSize={"Continue"}/>
    </div>
  );
}

문제 없어보인다. 하지만 분명히 잘못된 코드를 작성했다.
fontSize의 타입은 number이고, banana는 string인 것을 우리는 알 수 있다. 하지만 react는 그것을 모르기 때문에 propTypes을 사용해 Props로 전달하는 state의 type이 무엇인지 확인하는 단계를 거쳐야한다.

Btn.propTypes = {
  banana: PropTypes.string,
  fontSize: PropTypes.number,
};

type에 맞지 않는 값을 보내고 있다고 경고하는 메세지가 출력된다.
어디의 어느 부분이 문제인지 콕 집어주기 때문에 확인 후 수정할 수 있다.

👉🏻propTypes로 확인할 수 있는 것들

일단 해볼게요!✍🏻

이전 포스트

React : input and state

다음 포스트