0515

s2ljeun·2022년 5월 15일
0

공부

목록 보기
6/10

공부내용 한줄 요약
.propTypes로 버그를 잡을 수 있다.

1.< script src="https:/ /unpkg.com/prop-types@15.7.2/prop-types.js"></ script>추가
2. 컴포넌트명.propTypes = { prop: PropTypes.자료형, } 적어주면 prop 자료형을 제한할 수 있다.
3. prop:PropTypes.자료형.isRequired 적어주면 필수 prop이 된다.

Btn.propTypes = {
      text: PropTypes.string.isRequired,
      onClick: PropTypes.func,
    };

    function App() {
      const [value, setValue] = React.useState("Save Changes");
      const changeValue = () => setValue("Revert Changes");
      return (
        // Btn 안의 onClick은 event listener가 아닌 prop
        <div>
          <Btn text={value} onClick={changeValue}/>
          <Btn text="Continue" />
        </div>
      );
    }
    

Comment
이 기능으로 js의 약점을 보완해줄 수 있는 것 같다.(python 공부하다보면 오류 로그가 굉장히 도움이 된다. )
+TypeScript 사용하면 .propTypes를 사용하지 않아도 된다.

profile
프론트엔드

0개의 댓글