React learning #4 prop,React.memo(),btn.propTypes={}
props:
부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방법
첫 번째 인자이자, 유일한 인자
오브젝트 형식
컴포넌트:
JSX를 반환하는 함수
부모에서 데이터를 보내서 컴포넌트 하나로 두 가지 만듦
ㄴshortcut // bracket 안에 프로퍼티
function Btn(props {banana, big}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 30,
fontSize: big ? 18 : 15
}}
>
{props.banana} {banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana="Save Changes" ,big={true} />
<Btn banana="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
주의점!!!
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert changes");
return (
<div>
<Btn text={value} onClick={changeValue} />//커스텀 컴포넌트에 들어가 있는 onClick은 event:Listener가 아니고 그냥 props의 이름이다.
<Btn text="Continue" />
</div>
);
}
HTML 엘리먼트 안에 onClick이 있었다면 그건 eventListener가 맞다
function Btn({ text }) {
return (
<button
onClick=""
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 30,
}}
>
{text}
</button>
);
}
다시 한번 말하자면, 커스텀 컴포넌트 안에 들어가는 속성은 button안에 적용되는 게 아니라 Btn 컴포넌트 props으로 들어가는 것
ReactMemo:
1. 불필요한 re-render는 React.memo()로 관리할 수 있음
부모 컴포넌트의 state를 변경하면 당연히 그 자식 컴포넌트들도 Re-render가 일어남. 불필요한 렌더링이 발생할 수도 있는데, 이 경우에는 React.memo()로 prop의 변경이 일어난 부분만 렌더링 시킬 수 있음.
2.State, prop가 변경이 된다면 화면 자체가 리 렌더링 되기 때문에 한 개 변경 시 천 개가 다시 렌더링 되기 때문에 화면이 매우 느려진다. 컴포넌트들이 다시 그려질 때 우리가 컨트롤할 수 있다
아주 많은 자식 컴포넌트를 가지고 있는 부모 컴포넌트일 때 사용하면 될 듯.
* React.memo()
컴포넌트가 React.memo()로 wrapping 될 때, React는 컴포넌트를 렌더링하고 결과를 메모이지(Memoizing)한다. 그리고 다음 렌더링이 일어날 때 props가 같다면, React는 메모이지(Memoizing)된 내용을 재사용한다.
function Btn({ text, onClick }) {
console.log(text, " is rendered"); //onChange 때문에 prop이 바뀌었을 때 전에는 btn버튼 두 개 모두 렌더링 됐었는데 React.Memo(Btn)으로 prop이 변경된 것만 리 렌더링하라고 컨트롤하고 난 후 오직 변경 된 버튼만 리렌더링 됨을 알 수 있었다.
return (
<button
onClick={onClick}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 30,
}}
>
{text}
</button>
);
}
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>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
prop-Type:
컴포넌트 설정하는 방법.
어떤 타입의 prop을 받고 있는지 체크해줌
prop을 타입을 정해서, 잘못 작성하거나 작성하지 않았을 때 체크해 줌
https://unpkg.com/prop-types@15.7.2/prop-types.js
MemorizedBtn.propTypes = {
text: PropTypes.string,
fontSize: PropTypes.number.isRequired,
}; ///콘솔 창으로 조건에 맞지 않으면 알려줌
Btn 컴포넌트를 어떤 스타일로 설정했는데,
바꾸고 싶은 것은 button내에서 fontSize와 text 뿐.
그래서 복붙 대신, 어떤 prop들을 받을 수 있는 Btn 컴포넌트를 만든 것이다.
prop들을 컴포넌트의 인자로서
Btn 컴포넌트의 부모로부터 전달되고 있는 것이다.
그래서 우리의 Btn 컴포넌트들은 text, fontSize 두 개의 prop을 받고 있다.
Btn 컴포넌트 함수의 첫번째 인자 안에서 prop 접근 가능.
첫번째 인자에 전달된 모든 prop들을 하나의 오브젝트로서 받는 것이다.
prop을 전달할 때의 이름과 받아서 사용할 때의 이름은 동일해야한다.
2. PropType을 이용해서 보내지는 prop 에 type을 정의 할수 있습니다. 정의 하는 이유는 잘못된 type의 prop 이 보내지는 것을 방지하기 위해서 입니다. PropType을 정의 했을때 React는 에러메세지를 통해서 잘못된 type이 보내지고 있다고 알려줍니다.