[TIL] ReactJS - Props

오늘 공부한것 & 기억하고 싶은 내용

Props

• props는 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방식(?)이다.
• props은 컴포넌트(component)에 보내지는 인자(argument)다.
• props에 function도 보낼 수 있음: 이벤트 리스너를 넣는 것과는 다른 개념임

React.memo()

• 부모 컴포넌트의 state를 변경하면 당연히 자식 컴포넌트는 리렌더가 일어난다. 이러한 기능이 수천개 있다면 불필요한 렌더링이 발생하게 되어 최적화에도 맞지 않고, 성능이 저하될 수 있는데 이럴때 사용할 수 있는 것이 React.memo()이다.
• props가 변경되지 않는다면 다시 그릴 필요가 없다.
• props의 변경이 일어난 부분만 렌더링 시켜줌
• 자식 컴포넌트가 많다면 이 기능 사용해도 괜찮을 듯
• 메모 기능을 사용한다면 React는 컴포넌트를 렌더링하지 않고 마지막으로 렌더링된 결과를 재사용
• const MemorizedBtn = React.memo(Btn) : Btn이라는 컴포넌트를 메모.. -> 컴포넌트 이름 변경해주어야 함

참고: https://ko.reactjs.org/docs/react-api.html#reactmemo

PropTypes

• 리액트는 파라미터를 잘못 넘겨도 오류가 발생하지 않는다.
• 이러한 문제를 줄이기 위해서 PropTypes을 사용해서 경고를 줄 수 있다.(타입스크립트와 비슷?)

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

MemorizedBtn.propTypes = {//타입 설정
  btnText: PropTypes.string.isRequired,//.isRequired 꼭 적어주지 않으면 경고 뜸
  fontSize: PropTypes.number
}

• type과 다르게 입력되었을때 warning을 띄워 문제점을 파악할 수 있다.
• .isRequired를 사용하면 이 props는 꼭 사용해줘야 한다. 안 그럼 경고창 뜸
• 여러 사람과의 협업 혹은 재사용이 많은 컴포넌트엔 꼭 필요할 듯

배운점 & 느낀점

리액트를 배우면서 늘 props에서 막혔던거 같은데 복습의 복습의 복습을 한다면 props도 잘 쓰는 날이 오겠지..
React.memo()는 고차원적인 문법이라 코드의 양이 많지 않으면 쓸 일이 없다고 하는데, 나중에 좋은 회사가면 꼭 써보고 싶다 ^^

PropTypes나 타입스크립트를 사용해서 타입을 꼭 정의해주는게 좋다는게 아직 와닿지 않는다. 아마도 방대한 코드를 본 적이 없어서 그런거겠지
당장 회사에서 사용하진 않아도 코드를 짤때 타입에 대해서 생각하면서 짜는 연습을 해야겠다.