[React] Movie-app Notes - Props

📒 Nomad Coder ReactJS로 영화 웹 서비스 만들기
강의노트 (2021 Updated ver.)

---

# 4. Props

Props(Properties)

컴포넌트에 '일방향적으로' 전달하는 값
부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 하는 위해 props가 필요하다

State Practice에서 만들었던 컴포넌트는 자식 컴포넌트가 독립적으로 존재할 수 있다.
자식 컴포넌트 MinsToHrs, KmToMile가 부모 컴포넌트 App()의 데이터를 그다지 필요로 하지 않기 때문에 아래에서는 데이터 전달을 위한 새로운 예시를 만들 것이다.

Props 사용하지 않을 때

<script type="text/babel">
  function ResetBtn() {
    return (
      <button
        style={{
          backgroundColor: 'red',
          border: 0, // == border: 'none',
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        reset
      </button >
    )
  }
  function ConfirmBtn() {
    return (
      <button
        style={{
          backgroundColor: 'blue',
          border: 0, // == border: 'none',
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        confirm
      </button >
    )
  }

  function App() {
    return (
      <div>
        <ResetBtn />
        <ConfirmBtn />
      </div>)
    // Btn을 소문자로 적어서 계속 에러가 났었다.
  }


  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

props를 전달하지 않을 때는 같은 역할을 하는 버튼이라도 다른 속성값이 있기 때문에 같은 코드를 반복해야 했다. 버튼의 로직이 같지만 BackgroundColor가 다르고, 버튼의 내용이 다르기 때문에 같은 코드를 두 번 나누어 쓰게 되었다.
이 때, props를 이용해 변화되는 속성만 따로 전달을 한다면 불필요한 반복을 줄일 수 있다.

Props를 사용하면

<script type="text/babel">
  function Btn({ name, color }) {
    console.log(color);
    return (
      <button
        style={{
          backgroundColor: color,
          border: 0, // == border: 'none',
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        {name}
      </button >
    )
  }

  function App() {
    return (
      <div>
        <Btn name="reset" color="red" />
        <Btn name="confirm" color="blue" />
      </div>)
    // Btn을 소문자로 적어서 계속 에러가 났었다.
  }


  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

눈에 띄는 차이점은

1. button이라는 공통의 역할을 하는 <Btn /> Component 단일화
2. <Btn /> Component에서 인자로 넘겨주는 name, color
3. backgroundColor: color, {name}처럼 변수로 쓰이는 2번의 값
4. App()에서 최종적으로 rendering되는 <Btn /> Component 형태

 	<Btn name="reset" color="red" />
 	<Btn name="confirm" color="blue" />

Props는 바로

name, color => props
<Btn />이라는 공통 컴포넌트에 변해야 하는 속성, 버튼의 내용=name과 색상=color을 props로 주며 <Btn />컴포넌트를 재사용할 수 있게 되었다.

자식 컴포넌트의 파라미터 값은 오직 하나, props의 {오브젝트}이다.
<Btn />컴포넌트에 속성으로 넣은 모든 값들이 props라는 {오브젝트}에 담겨 전달된다.

	function Btn(props) === function Btn({name, color})

Props는 number, string, boolean, 함수 등 여러 형태로 전달 가능하다.

<script type="text/babel">
  function Btn({ name, onClick }) {
    return (
      <button
        onClick={onClick}
        style={{
          backgroundColor: 'gray',
        }}
      >
        {name}
      </button >
    )
  }

  function App() {
    const [value, setValue] = React.useState("origin"); //name default 설정
    const changeValue = () => setValue("change");

    return (
      <div>
        <Btn name={value} onClick={changeValue} />
        <Btn name="reset" />
      </div>)
  }
  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

이처럼 onClick 함수를 만들어 prop으로 전달해 버튼의 name이 바뀔 수 있도록 구현할 수 있다.

📌 Check Point

여기서 App()의 <Btn />에서 쓰인 onClick={changeValue} 은 이벤트 리스너가 아니라 prop이다!
단지 이름이 onClick인 prop이다. 만약 <button onClick={}>같이 HTML 속성에 넣었다면 그것은 이벤트 리스너이다. 하지만 <Btn />처럼 커스텀 컴포넌트에 넣는다면 그건 단지 prop일 뿐이다. 그렇기 때문에 onClick 이벤트를 설정하고 싶다면 위의 코드처럼 prop을 매개 변수로 전달해야 한다.
반대로, <Btn style={{color : "green"}} />은 적용되지 않는다. <Btn />은 HTML 태그가 아니기 때문이다.

Props 전달 형태

props 자체로 매개변수를 전달한다면 아래와 같이 써야 한다.

• {name} => {props.name}
• color => props.color

  function Btn(props) {
    return (
      <button
        style={{
          backgroundColor: props.color,
          border: 0, // == border: 'none',
          borderRadius: 20,
          padding: 10,
          color: 'white',
          margin: '10px',
        }}
      >
        {props.name}
      </button >
    )
  }

하지만 개발자들은 shortcut을 좋아하니까..ㅎㅎ

Prop Type

Prop에 형식이 정해져 있는 것은 아니지만, 개발 의도에 따라 형식을 지켜야 할 때가 많다. 하지만 코드를 짜다 실수를 할 수도 있고, 개발자들간 협업을 하다보면 소통의 부재로 Prop의 전달에 오류가 발생할 수도 있다. 예를 들어 위처럼 name은 string 타입이어야 하지만 name에 숫자를 넣는 경우가 발생한다면? 앱 구현의도에서 벗어날 것이다.
이럴 때 필요한 것이 Prop Type이다.

Prop Type은 말 그대로 Prop에 타입을 정해주는 것이다.
혹시나 규약을 따르지 않았을 경우, 에러를 대비해 설치하는 보험이라고 볼 수 있다.
타입을 사용하려면 Prop Type 라이브러리를 설치가 필요하다. 스크립트에 추가해주자.

<script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>

Origin Code

<script type="text/babel">
  function Btn({ name, onClick, padding }) {
    return (
      <button
        onClick={onClick}
        style={{
          backgroundColor: 'gray',
          border: 0,
          borderRadius: padding,
          padding, // === padding: padding,
          color: 'white',
          margin: '10px',
        }}>
        {name}
      </button >
    )
  }
  function App() {
    const [value, setValue] = React.useState("origin");
    const changeValue = () => setValue("change");
    return (
      <div>
        <Btn name={value} onClick={changeValue} padding={20} />
        <Btn name="reset" padding={30} />
      </div>)
  }
  const root = document.getElementById("root")
  ReactDOM.render(<App />, root);
</script>

오류발생

  function App() {
    const [value, setValue] = React.useState("origin");
    const changeValue = () => setValue("change");
    return (
      <div>
        <Btn name={value} onClick={changeValue} padding={20} />
        <Btn name={30} padding='reset' />	{/* 오류 발생지점 */}
      </div>)
  }

여기서 name과 padding의 값이 바뀌어 입력이 되었을 경우, <Btn />은 내가 만든 컴포넌트이기 때문에 React는 무엇이 잘 못 됐는지 알 지 못한다.

에러메세지가 없다.

이러한 경우에서 타입을 지정해준다면?

 // 프롭에 **타입**을 주는 방법
  Btn.propTypes = {
    name: PropTypes.string,
    padding: PropTypes.number,
  }

  function App() {
 ...
  }
   

콘솔에서 타입이 맞지 않다며 경고해 준다.

또, 꼭 필요한 값이 있다면 isRequired를 적용하면 된다.

  return (
      <div>
        <Btn name={value} onClick={changeValue} padding={20} />
        <Btn padding={30} />
      </div>)

2번째 버튼에 name 값을 빼먹었다.

구동은 되지만 콘솔창처럼 name이 required, 꼭 필요한 prop임을 알려주고 있다.
값을 지정하지 않았기 때문에 undefined로 적용이 된 모습을 볼 수 있다.

이처럼, Prop Type을 사용해 의도를 명확하게 표시할 수 있다.
Prop이 어떤 타입으로 쓰여야 하는지, 이 속성은 생략 가능한 속성인지 아닌지 명확하게 집고 넘어갈 수 있다.

의도대로 작동된 모습

---

Summary

Component를 반복해 재사용할 때, 바뀌는 데이터를 전달하는 것이 props이다.
리액트의 Key - '필요한 부분만 re-rendering'하는 것이 props로 하여금 더욱 interactive 해 질 수 있다.