[React] Props

▷ Props

• 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달하기 위한 메커니즘
• 부모 컴포넌트는 자식 컴포넌트에게 데이터를 넘겨주고, 자식 컴포넌트는 이러한 데이터를 활용하여 UI를 구성하거나 다른 작업을 수행한다.
• props는 부모 컴포넌트에서 자식 컴포넌트로 '읽기 전용'으로 전달된다. 즉, 부모 컴포넌트에서 전달한 props는 자식 컴포넌트 내부에서 변경할 수 없다. props는 컴포넌트 내에서 함수의 매개변수처럼 사용된다
• 컴포넌트는 어떤 JSX를 반환하는 함수

폰트 사이즈가 big이라면 20px, 아니라면 10px

  <script type="text/babel">
    function Btn({ text, big }){
      console.log({text, big}) 
      // {text: 'Save Changes', big: true}
      // {text: 'Continue', big: false}

      // console.log(props) // Btn({ props })
      // {text: 'Save Changes', big: true}
      // {text: 'Continue', big: false}
      return (
        <button 
          style={{
            backgroundColor: 'tomato',
            color:'white',
            padding:'10px 20px',
            border:0,
            borderRadius:10,
            fontSize: big ? 20 : 10, 
          }}
        >
        {text}
        </button>
      ) 
    }
    function App(){
      return (
        <div>
          <Btn text="Save Changes" big={true}/>
          <Btn text="Continue" big={false}/>
        </div>
        )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App/>, root)
  </script>

 

▷ memo

• 컴포넌트의 성능 최적화를 위해 사용되는 기능 중 하나
• 컴포넌트의 재랜더링을 방지하여 성능을 향상시키는 역할을 한다
• 상태나 속성(props)이 변경되면 재랜더링 된다. 그런데 동일한 결과를 가지는 경우 불필요한 재랜더링을 방지하여 성능을 향상시킬 수 있다.
• 얕은 비교를 수행하므로, 속성(props)이 복잡한 객체나 배열인 경우 제대로 작동하지 않을 수 있다

<script type="text/babel">
    // changeValue가 onClick이벤트와 같은 이름을 가졌다할지라도 props이다!
    function Btn({ text, changeValue }){
      return (
        <button 
          onClick= {changeValue}
          style={{
            backgroundColor: 'tomato',
            color:'white',
            padding:'10px 20px',
            border:0,
            borderRadius:10,
            fontSize: 16, 
          }}
        >
        {text}
        </button>
      ) 
    }
     // 재랜더링될 때 return 내용 전체가 새로 그려지는 것을 방지하기 위해 memo사용 : 
     // props가 변경되지 않는다면 다시 그릴 필요가 없다는 것을 알려줌
     // 재랜더링될 때 모든 내용 전체가 새로 그려진다면 속도 저하를 야기함
    const MemorizedBtn = React.memo(Btn)
    function App(){
      // 버튼을 클릭해서 바뀌면 부모의 상태가 변경되는데 아래의 return의 내용 전체가 새로 그려짐
      const [value, setValue] = React.useState('Save Changes')
      const changeValue = () => setValue('Revert Changes')
      // 아래의 changeValue는 onClick 이벤트가 아니라 단지 props
      // changeValue는 props 이름일 뿐, 어떠한 기능X
      return (
        <div>
          <MemorizedBtn text={value} changeValue={changeValue}/>
          <MemorizedBtn text="Continue"/>
        </div>
        )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App/>, root)
  </script>

▷ Props Type 확인

  <!-- react는 UI를 interactive하게 만들어줌 -->
  <script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
  <!-- react dom은 HTML에 태그를 생성해줌 -->
  <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
  <!-- babel을 사용하여 브라우저가 JSX코드를 이해할 수 있도록 -->
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <!-- props의 타입 검사 -->
  <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
  <script type="text/babel">
    function Btn({ text, fontSize }){
      return (
        <button 
          style={{
            backgroundColor: 'tomato',
            color:'white',
            padding:'10px 20px',
            border:0,
            borderRadius:10,
            fontSize, 
          }}
        >
        {text}
        </button>
      ) 
    }
    const MemorizedBtn = React.memo(Btn)
    // props의 Type검사
    MemorizedBtn.propTypes = {
      text: PropTypes.string.isRequired, // 필수
      fontSize: PropTypes.number // 선택
    }
    function App(){
      const [value, setValue] = React.useState('Save Changes')
      const changeValue = () => setValue('Revert Changes')
      return (
        <div>
          <MemorizedBtn text='Save Changes' fontSize={18}/>
          <MemorizedBtn text={14} fontSize={'continue'}/>
        </div>
        )
    }
    const root = document.querySelector('#root')
    ReactDOM.render(<App/>, root)
  </script>

코드 문법 상 문제는 없지만 타입을 확실히 하기 위함

<div>
  <MemorizedBtn text='Save Changes' fontSize={18}/>
  <MemorizedBtn fontSize={14} text={'continue'}/>
</div>

위의 코드처럼 타입을 맞게 적어주면 위의 이미지와 같은 오류문구가 나타나지 않는다

 

1. 타입 확인
 : PropTypes를 사용하여 컴포넌트의 props 타입을 검사할 수 있다. 예를 들어, 컴포넌트가 문자열을 기대하는 props에 숫자를 전달하는 등의 오류를 방지할 수 있다.

2. 런타임 에러 방지
 : PropTypes 검사를 통해 런타임에 잘못된 데이터를 전달하는 경우 경고 메시지를 출력하거나 에러를 발생시킬 수 있다. 이로 인해 잠재적인 버그를 빠르게 발견하고 해결할 수 있다.

3. 문서화
 : PropTypes를 사용하여 컴포넌트가 어떤 props를 필요로 하는지, 어떤 타입을 예상하는지 문서화하는 데 도움이 된다. 이를 통해 다른 개발자가 컴포넌트를 쉽게 이해하고 사용할 수 있다.

4. 개발 생산성 향상
 : PropTypes를 사용하면 타입 에러를 미리 방지하여 디버깅 시간을 절약할 수 있고, 안정적인 코드를 작성하는 데 도움이 된다.