1. Vue를 기억하며
어쩔 수 없이 Vue를 기억하게 되는건 나의 첫 사랑이 아니라 처음으로 배운게 Vue라서.
Vue에서도 부모 → 자식 컴포넌트로 객체를 전달 할 때 ‘props’ 라고 사용했다.
React에서도 똑같다.
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
const root = ReactDOM.createRoot(document.getElementById('root'));
const element = <Welcome name="Sara" />;
root.render(element)
2. Vue와의 큰 차이!
Vue는 props로 받는 자식쪽에서 반드시 prop의 data type을 지정해주었다.
하지만 React는 그럴 필요가 없다.
⇒ 이게 단점이 될 수도 있는 것이 data 형식을 맞추지 않는다면 ? 꼭 필요한 인자를 전해주지 않는다면? 이라는 문제가 생긴다.
⇒ 보완을 위해~ propstype을 준비해 두었지 ^^
$npx create-react-app을 통해서 react-app을 만들었다면, npm을 이용해서 설치해보자!
$npm i prop-types
💡
주의
대소문자, 철자 잘 확인하자! ‘prototype’이 아니라 ‘prop’ 입니다.
import PropTypes from "prop-types";
import styles from "./Button.module.css"
function Button({text}){
return(
<button className={styles.btn}>{text}</button>
)
}
Button.propTypes = {
text: PropTypes.string.isRequired,
}
export default Button;
3. 재렌더링!
REACT의 가장 큰 특징 중 하나는 변화가 일어난 부분만 재렌더링이 일어난다는 것이다.
하지만 주의할 점이 있다.
💡
부모 요소에서 리렌더링이 일어다면 ⇒ 자식컴포넌트도 리렌더링 된다!!
하지만 리액트가 또 보완점을 준비해 두었다 ^^. 바로 React.memo()를 활용하는 것이다.
컴포넌트가 동일한 props로 동일한 결과를 렌더링 해낸다면 ⇒ 메모이징 된 결과를 사용한다.
props가 갖는 객체에 대하여 얕은 비교 만을 수행한다고 한다.
❓ 얕은비교?
기본 타입 데이터의 경우 값이 동일한지만 비교하고, 객체의 경우 참조만 비교한다.
그래서 객체를 state로 사용하게 될 경우 값이 같더라도 참조값이 다르다.
const obj1 = { a: 1, b: 2 };
const obj2 = { a: 1, b: 2 };
console.log(obj1 === obj2);// false
Uploaded by N2T