React: Props

summereuna🐥·2021년 11월 17일
React
0

React JS

목록 보기
8/69

Props

Props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 일종의 방법이다.

1. 기존 예제로 설명을 해보자.

  • 부모 컴포넌트: <App />
  • 자식 컴포넌트: <MinutesToHours />, <KmToMiles />, <MmToInch />

현재 이 예시에서 자식 컴포넌트의 경우, 그다지 부모 컴포넌트인 <App />의 데이터를 필요로 하지는 않는다. 즉, 자식 컴포넌트는 독립적이다.

2. 이제 부모 컴포넌트에서 자식 컴포넌트로 데이터를 보내는 것을 연습해보자.

Props를 이해하고 왜 필요한지 알기 위해서는 Props로 해결 가능하게 될 문제들을 겪어봐야 한다.

회사에서 어플리케이션을 만들고 있다고 가정해보자.

  • 어플리케이션에는 다양한 버튼이 있다. 변경 사항 저장-, 취소-, 로그인-, 확인 버튼 등...
  • 대부분의 디자이너들은 버튼 모양을 같게 만든다.
    그렇다면 어떻게 리액트 컴포넌트를 재사용할 수 있게 만들 수 있을까?
    👉 지금은 재사용하는 방법을 모르기 때문에 아는 방법대로 한다면, 각각의 버튼마다! 컴포넌트를 만들겠지.

❗️ 컴포넌트는 JSX를 반환하는 함수이다.😀

<!DOCTYPE html>
<html>
  <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">
    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);
  </script>
</html>

이렇게 버튼을 만들었는데, 디자이너가 와서 버튼 스타일이 구리다고 스타일을 바꾸고 싶다고 한다면?

  • ReactJS에서는 많은 방법들로 스타일을 바꿀 수 있다.
    CSS, 다른 라이브러리, 등을 사용하거나 또는 가장 기본적인 인라인으로 button tag 내의 style을 변경해 줄 수도 있다. 이때는 평범한 JS object 형식으로 쓰면 된다.
<!DOCTYPE html>
<html>
  <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">
    function SaveBtn() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          Save Changes
        </button>
      );
    }
    function ConfirmBtn() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          Confirm
        </button>
      );
    }

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

잘 적긴했는데, 버튼이 두 개이기 때문에 비효율적이게도 복붙을 해야 한다.

현재 두 버튼의 차이는 그저 버튼에 적힌 text만 다를 뿐 다른 설정이 다 똑같다. style을 복붙하는 것 대신, 좀 더 나은 설정이 가능한 컴포넌트로 만들 수 있을까? yesssss!
이제부터 할 일은 컴포넌트를 좀 더 설정 가능하게 바꾸는 작업이다.

<img src="~"> 처럼 동일한 syntax를 사용하면서 내가 만든 커스텀 컴포넌트에 적용해 주면 된다.
내가 사용하는 모든 컴포넌트들은 ()에 argument를 받는다. 리액트가 넣어준다.
argument이름은 마음대로 지으면 된다. 보통 이 인자이름을 props라고 부르는데, Btn으로부터 전달 받는 properties이다.

  • Btn()은 함수니까 마치 이렇게 적어주는 거랑 같다.

어떤 props든 Btn 컴포넌트에 보내면 그것들은 Btn 함수의 첫 번째 argument(인자) 속으로 들어간다.

props를 콘솔에 찍어보자.

<!DOCTYPE html>
<html>
  <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">
    function Btn(props) {
      console.log(props);
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        ></button>
      );
    }

    function App() {
      return (
        <div>
          <Btn name="Save Changes" />
          <Btn name="Confirm" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>

오호.. 그렇다면 {props.name} 이렇게 가져다 쓸 수 있겠구먼

<!DOCTYPE html>
<html>
  <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">
    function Btn(props) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          {props.name} //👈
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn name="Save Changes" />
          <Btn name="Confirm" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>
  • props는 오브젝트이다.
    부모 컴포넌트에서 자식컴포넌트로 보낸 모든 것을 갖는 오브젝트로, props를 보내면 React JS는 자동으로 모든 props를 이런 Btn({이름: "값"}) 오브젝트 안으로 집어 넣는다.
<Btn name="Save Changes", x={false} />

그래서 이런식으로 오브젝트 형태로 보낼 수 있다. 그렇기 때문에 이 Btn의 props는 우리가 넣은 모든 것을 갖는 오브젝트가 된다.

  • 그리고 이 오브젝트는 내 컴포넌트의 첫 번째 인자로 주어진다.
    두 번째 인자는 없다. props는 첫 번째이자 유일한 인자이다.


이렇게 하나의 컴포넌트가 있지만 UI는 다르다. 재사용성!

그런데 대부분은 props를 오브젝트로부터 꺼내서 숏컷을 쓴다.

function Btn(props) 
...
{props.name} //👈

로 사용하기 보다는, props가 오브젝트니까, property를 오브젝트로부터 꺼내서 사용한다.
{}중괄호 열어서 키 값을 집어넣어서 바로 사용한다.

function Btn({name}) 
...
{name} //👈

다른 속성도 보내보자.

<!DOCTYPE html>
<html>
  <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">
    function Btn({ name, big }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            fontSize: big ? 18 : 12,
          }}
        >
          {name}
        </button>
      );
    }

    function App() {
      return (
        <div>
          <Btn name="Save Changes" big={true} />
          <Btn name="Confirm" big={false} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>
</html>


props 기반으로 style 안에서 if else를 사용할 수 있다.

profile
summereuna🐥
Always have hope🍀 & constant passion🔥
이전 포스트

React: 캡슐화

다음 포스트

React: React.memo()

0개의 댓글