Props
리액트 공식 문서
👉 https://ko.reactjs.org/docs/components-and-props.html
네가 만들고 사용하는 컴포넌트들은 "()" 괄호로 argument(인자)를 받는다.
ReactJS는 자동으로 입력한 모든 property(props)들을 Object 안으로 넣는다.
이 오브젝트는 컴포넌트의 인자로 주어진다.
🤔 Prop를 통해 컴포넌트에 객체를 전달할 수 있다.
컴포넌트에 className에 대한 props을 인계하고,
자식 컴포넌트의 className에 값을 할당시켜
css로 간단하게 스타일링도 진행할 수 있겠다는 생각이 들었다.
React의 재사용성에 대해서 다시 한번 감탄하는 강의였다.
🤔 Btn 함수의 return에서 버튼의 style을 지정하는데
왜 중괄호를 2번씩 써야 하는 것인가요?
✅ ES6 문법으로 prop을 좀 더 간결하게 가져올 수 있다.
function Btn(props) {
return <button onClick={props.ChangeValue}>{text}</button>;
}
⬇️
function Btn({ text, changeValue }) {
return <button onClick={changeValue}>{text}</button>;
}
✅ 컴포넌트에 넣는 이벤트 리스너는 이벤트 리스터를 할당한 것이 아니다. 이벤트 리슨어는 htm의 어트리뷰터에 설정해야지만 이벤트가 할당된 것이다.
✅ 부모의 상태를 바꾸는 함수를 만들고, 이 함수를 실행할 때, 자식이 실행하도록 진행했다.
부모에 변화가 생겨도 모든 자식 컴포넌트에 변화가 생기는 것이 아니다.
이때 memo를 활용하면 변화가 생긴 자식 컴포넌트만 랜더링이 일어난다.
protypes 를 이용해서 prop에 잘못 들어오는 타입을 확인할 수 있다.
Btn.propTypes =
{text: PropTypes.string};
const MemorizedBtn = React.memo(Btn);
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={12} changeValue={changeValue} />
<Btn text={value} />
</div>
);12
}
👇type error문을 확인할 수 있다.