[React] props와 prop types, 그리고 React.memo
1. props
와 eventListener
📌 component 속 props와 HTML 요소 속 eventListner의 차이를 이해해보자!
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} changeValue={changeValue} />
<Btn text="Continue" />
</div>
);
}
props
로 text나 boolean은 물론이고, changeValue와 같은 function도 가능하다❗
- 컴포넌트에서 changeValue가 eventListener 역할을 하는가❓
- 위 코드에서 changeValue는 Btn의 prop이며, 실제 eventListener가 아니다.
- 따라서 HTML 요소에도 이 이벤트를 적용시켜주어야 한다. (아래의 코드와 같이)
function Btn({ text, changeValue }) {
return (
<button
onClick={changeValue}
style={{
// 생략
}}
>
{text}
</button>
);
}
😎 기억할 것
props에 값을 넣는다고 하여 return 안의 HTML 요소에 자동적으로 들어가지 않는다.
2. prop types
🔨 설치 및 설정
(1) 설치
// PropTypes
<script src="https://unpkg.com/[email protected]/prop-types.js"></script>
// 첫번째 script source도 아래로 바꾸어줄 것 (버전)
<script src="https://unpkg.com/[email protected]/umd/react.development.js "></script>
(2) 설정
// 리액트에 propTypes 설명하기
Btn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number,
};
✅ .isRequired
📌 필수 prop으로 인식하는 것을 도와줌
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number.isRequired,
};
component가 text와 fontSize이 두가지 props만은 정확히 갖고 render되게 해준다.
💖 좋은 점
function App() {
return (
<div>
<Btn text="Save Changes" fontSize={18} />
<Btn text={14} fontSize={"Continue"} />
</div>
);
}
propTypes를 설치❌
- 원하는 props의 type
- props로 text에는 text값을, fontSize에는 숫자값을 넣어주고자 한다.
- Error 표시되지 않음
- 문법적으로 틀린 내용이 없기 때문에 error가 표시되지 않는다.
propTypes를 설치⭕
아래와 같이 console을 통해 오류를 확인할 수 있다.
3. React Memo
📌 컴포넌트의 props가 변하지 않는다면, 리렌더링을 방지하여 줄 수 있는 함수
- 부모 component에 어떤 state라도 변경이 생기면, 그 부모의 모든 자식들은 re-render된다. 이는 추후 애플리케이션이 느려지는 원인이 될 수 있기에
React.memo
를 사용한다.
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} onClick={changeValue} />
<Btn text="Continue" />
</div>
);
}
🔎 언제 쓰이는걸까?
- 상황
- 변하지 않는 Cointinue 버튼을 리렌더링 시키고 싶지 않다.
- 해결
- props가 변경되지 않는 한에서
React.memo
를 사용하여 component를 리렌더링 할지말지를 내가 결정할 수 있다const MemorizedBtn = React.memo(Btn); function App() { const [value, setValue] = React.useState("Save Changes"); const changeValue = () => setValue("Revert Changes"); return ( <div> <MemorizedBtn text={value} onClick={changeValue} /> <MemorizedBtn text="Continue" /> </div> ); }
Author And Source
이 문제에 관하여([React] props와 prop types, 그리고 React.memo), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@hye_rin/React-props와-prop-types-그리고-React.memo저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)