티스토리 뷰

Frontend/react.js

[React JS] props 객체

blueprint-12 2022. 3. 13. 20:49

Props? 

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

-props는 내가 만든 컴포넌트로 전달되는 속성들을 모아놓은 객체이다.  첫번째이자 마지막 인자(2번째 인자는 없음)

 

▶prop 작성 시 주의사항

 

  • props를 작성할 때 , space(공백)가 있으면 안됩니다
text = {12} //space있는 경우 (X)
text={12} //space없이 올바르게 작성한 경우(O)
  • prop을 전달할 때의 이름과 받아서 사용할 때의 이름이 동일해야만 한다.
 //prop 받아서 사용할 때
 function Btn({ text, ftSize = 16 }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            marginRight: "5px",
            fontSize: ftSize,
          }}
        >
          {text}
        </button>
      );
    } 
//prop 전달 할 때  
 function App() {
      return (
        <div>
          <Btn text="Something" ftSize={12} />
          <Btn text="Continue" />
        </div>
      );
    }

-> App이라는 컴포의 ftSize와 text라는 prop의 명이 Btn 내부에서도 동일한 이름으로 매개변수로 들어오고 사용되어야 한다는 것입니다.

Component?

간단하게 말하면 컴포넌트는 어떤 JSX를 반환하는 함수이다.  -> 함수형 컴포넌트 

위의 예시를 보면 파란펜으로 체크해놓은 것을 "함수형 컴포넌트"라고 부르고  상위 컴포넌트에 속해있는 함수형 컴포넌트들(캡슐화 돼있는 것들을) "JSX의 내부"라고 부른다. //JSX의 내부에 대한 설명은 정확하지 않으므로 참고만 하기 

React.js의 css수정법은 여러가지가 있다. 

1. 해당 태그 내의 style을 변경하는 것(작성할 때에는 평범한 JS object 형식으로 쓰면 된다.)

<script type="text/babel">
function SaveBtn() {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
          }}
        >
          Save Changes
        </button>
      );
    }
    </script>

->하지만 이렇게 되면 모든 button의 스타일을 적용해줄때나 수정할 때 일일이 모든 버튼의 코드를 수정해야하는 일이 생긴다. 그렇다면 몇 가지 특성만 다르고 해당style들을 모두 갖는 단 한 가지의 컴포넌트만 만들 수 있다면 어떨까? 

 

 

<body>
    <div id="root"></div>
  </body>
  <!-- react and reactDOM -->
  <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>
  <!-- Load Babel -->
  <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,
          }}
        >
          Save Changes
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn potato="Save Changes" />
          <Btn potato="Continue" />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

위의 예시에서는 text만 다르고 모든 style속성은 같은 버튼을 여러개 배포하고 있다.

내가 만들고 사용하는 모든 컴포넌트들은 해당 컴포넌트의 ()소괄호에 argument(인자)를 받는다.(리액트가 넣어주는 것)

  • 내가 만든 컴포넌트 위의 예시에서는 "Btn 함수"이다. 
  • 첫번째 인자의 이름은 마음대로 지어줄 수 있음 통상적으로 해당 인자의 이름을 props라고 부릅니다. Btn으로부터 전달받는 properties인 것
  • JSX내부 코드에서 <Btn potato="Save Changes"/>는 결국 Btn()함수를 불러서 potato라는 인자를 이런식(으로 보내는 것과 같다. -> Btn({potato: "Save Changes"})
  • Btn은 함수이기 때문에 어떤 props이든 해당 컴포넌트에 보내면 그것들은 Btn 함수의 첫번째 argument 속으로 들어가게 된다. -> Btn함수에서 props를 첫번째 인자로 전달해주고 console.log(props)를 해보면 더 확실하게 알 수 있다. Btn을 두 번 렌더링했기 때문에 콘솔에 2개의 객체가 props으로 찍힌 것이다. 

 

▶리액트는 내가 만든 컴포넌트의 모든 속성들을 자동으로 모조리 prop이라는 오브젝트(객체) 안으로 집어넣는다. 그리고 그 객체는 내 컴포넌트의 첫번째 인자로 주어진다.// props는 첫번째이자 유일한 인자이다. 두번째 인자는 없음

 

console.log(props)

 

 function App() {
      return (
        <div>
          <Btn potato="Save Changes" king={false} />
          <Btn potato="Continue" queen={true} />
        </div>
      );
    }

예시코드를 살짝 수정해서 내가 만든 컴포의 속성들을 이렇게 줬다면 해당 속성들을 모아서 하나의 객체로 만든 것을 Btn에게 전달한다. 그것을 통상적으로 props라고 하며 console에 찍어보면 내가 준 속성들을 모아놓은 객체를 반환한다. 

다시 예시 코드로 들어와서 해당 코드를 고쳐서 텍스트만 다른 버튼을 만들어보자. 

props에 버튼의 이름이 담긴 속성이 있는 객체가 들어가있기 때문에 해당 객체를 사용해서 버튼의 이름을 바꿀 수 있게 됐다. 

 function Btn(props) {
      console.log(props);
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            marginRight: "5px",
          }}
        >
         Save Changes 
        </button>
      );
    }

에서 Save Changes 부분을 -> {props.potato}로 바꿔주면 각각의 버튼 이름이 다르게 된다. 

 

▶결과물

//참고로 속성명을 potato로 준 것은 속성명을 내 마음대로 지정할 수 있다는 것을 알려주기 위함이고 실제로는 구분을 위해서 potato같은 명이 아닌 명확한 속성명(key명)을 지어야 한다. (전 text로 변경했습니다.)

 

같은 Btn 컴포넌트(하나의 Btn컴포만 존재해서 그것을 공유)를 사용하지만, 해당 버튼들은 App컴포넌트(상위 컴포)에 의해 설정되고 있다. -> 재사용 가능해짐

 

props shortcut

위의 예제에서는 직접 props이라고 객체를 전달해줬지만 그것보다 더 짧게 쓰는 방법이 있다. 실제로 props를 쓰는 것보다 코드가 간결해지는 장점이 있다.

  • 중괄호를 써서 객체인 것을 나타내고 키명(속성)을 중괄호 안에 써준다.
  • 지정해준 속성이 여러 개라면 ,(쉼표)로 구분하여 써주면 된다.  

▼기존 코드

▼shortcut

예시 활용 ver(삼항 연산자를 통해서 폰트사이즈 조절하기)

 <body>
    <div id="root"></div>
  </body>
  <!-- react and reactDOM -->
  <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>
  <!-- Load Babel -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    function Btn({ text, big }) {
      return (
        <button
          style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
            marginRight: "5px",
            fontSize: big ? "12px" : "10px",
          }}
        >
          {text}
        </button>
      );
    }
    function App() {
      return (
        <div>
          <Btn text="Save Changes" big={true} />
          <Btn text="Continue" big={false} />
        </div>
      );
    }
    const root = document.getElementById("root");
    ReactDOM.render(<App />, root);
  </script>

- 참고로 big속성을 아예 Continue버튼에 주지않으면 undefined(즉, false) 로 뜨기 때문에 같은 결과물이 된다.  

'Frontend > react.js' 카테고리의 다른 글

[React JS] React 프로젝트 시작하기(CRA 설치)  (0) 2022.03.15
[React JS]React.memo() 기능과 props부가 설명(prop타입 체크하기)  (0) 2022.03.14
[React JS] Input 과 state를 사용해서 unit convertor(단위 변환기)만들기1  (0) 2022.03.11
[React JS] useState 의 state 변경하는 2가지 방법  (0) 2022.03.11
[React JS] State 에 대해서 배우기(React.useState를 사용해서 리렌더링하기)  (0) 2022.03.11
댓글