props
props는 컴포넌트에 어떤 값을 전달해줄때 사용.
같은 스타일, 상태 등을 가지고 다른 html 을 할당하고 싶을 때 props를 이용할 수 있다.
function Btn({ banana, big }) {
return <button
style={{
backgroundColor: "tomato",
color: "white",
border: 0,
padding: "10px 20px",
borderRadius: 10
fontSize: big ? 18 : 10
}}>{banana}</button>
}이때 props는 {banana, big} 이고,
({banana,big} 대신 props 라고 지정하면 사용할 때 props.banana라고 해야함. props는 오브젝트이기 때문에 {banana}라고 지정하면 바로 사용할 수 있음.})
function App() {
return <div>
<Btn banana="Save Changes" big={true} />
<Btn banana="Continue" big={false} />
</div>;
}이렇게 사용할 수 있다. Btn 안에 banana 라는 프롭스는 Btn 안에 첫번째 인자로 들어가며, 프롭스는 오브젝트 형태로 저장된다.
memoization
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return <div>
<Btn text={value} onClick={changeValue} />
<Btn text="Continue" />
</div>;여기서 첫번째 Btn 은 상태가 변할때(클릭했을때), 프롭스를 넘길때 rerendering 된다. 그런데, 리렌더링 될 때 같은 컴포넌트 안의 요소들이 전부 리렌더링 되기 때문에 두번째 Btn 도 리렌더링 되는 것을 볼 수 있다.
리렌더링 되는 경우
- Props 넘겨줄때
- State가 변경될때
- 부모 컴포넌트가 리렌더링 될 때
- Context value가 변경되었을 때
이렇게 되면 , 불필요한 리렌더링이 일어나 연산을 또 하게 되어 성능이 떨어진다.
이를 해결하기위해 memoization을 이용해는게 좋다.
memoization 은 특정 값을 저장해 놓고 다시 연산할 필요 없이 다시 사용하는 기법이다. memorization api 3가지를 알아보자.
- React memo
- memo 로 래핑된 컴포넌트를 기억한다. 그리고 다음 렌더링이 일어날 때 props 가 같으면 기억한 내용을 재사용한다.
- memo는 react hook 이 아닌 고차 컴포넌트.
- 즉, props가 변화하지 않으면 반환되지 않는 '강화된 컴포넌트'를 반환함
->함수형 컴포넌트가 같은 props로 자주 렌더링 될거라 예상될 때 사용하는것이 좋다.
const MemorizedBtn = React.memo(Btn);
return <div>
<MemorizedBtn text={value} onClick={changeValue} />
<MemorizedBtn text="Continue" />
</div>;
- React useMemo
- React useCallback
추후 수정
prop types
<Btn text={17} fontSize={"문장 잘못 입력uu"} />
text 는 문장을 전달해야하고, fontsize는 숫자를 전달해야 한다.
하지만 리액트는 타입이 잘못된지 몰라 에러를 확인할 수 없다.
따라서 propt types 를 따로 설정해줘야 타입 에러가 있는지 쉽게 확인 가능하다.
<script src=https://unpkg.com/prop-types@15.7.2/prop-types.js></script>
Btn.propTypes = {
text: PropTypes.string.isRequired,
fontSize: PropTypes.number,
};
propTypes를 설정해주면 에러를 콘솔창에서 확인 가능하다.
- 안되면 스크립트 src 확인해보기!
<script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script src=https://unpkg.com/prop-types@15.7.2/prop-types.js></script>useMemo 같은 메모이제이션은 남발하면 성능 저하의 원인이 될 수 있다.
-> 관련 레퍼런스
https://velog.io/@lky5697/stop-using-usememo-now?utm_source=substack&utm_medium=email
