props에 또 뭘 넣어볼 수 있을까?
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
//props는 더 많은 곳에서 이용할 수 있다. props 안에 어떤것을 더 넣어볼 수 있을까?
<script type="text/babel">
function Btn({ text }) {
console.log(text);
return (
<button
style={{
//style에 onClick={}을 넣는다면 이벤트 리스너가 되지만,
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
return (
<div>
<Btn text={value} onClick = {changeValue} />
//커스텀 컴포넌트에다 onClick를 넣는다면 이벤트리스너가 아니라 하나의 prop가 되는 것이다.
//그저 text처럼 prop의 이름임. direct로 button에 달리지 않을 것이다.
//이건 Btn 컴포넌트로 들어가는 무언가 이다.
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
이 곳에 그럼 onClick을 어떻게 전달할까?
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, changeValue }) {
//onClick를 사용하고 싶다면 여기서 prop으로 전달해서
//따로 추가해야 한다!! 손수 해야하는 것..
console.log(text);
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
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>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
결론은 boolean 타입 text 타입 이외에도 function들도 보낼 수 있다는 것이다.
부모 요소가 수정되었을 때 전체 자식요소를 재렌더링 하지 않는 방법=Memo
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<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.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
function Btn({ text, changeValue }) {
//React JS는 애플리케이션을 최적화 시키는 많은 것들을 갖고 있다.
//React JS으 규칙에 따라서 부모가 <Btn>의 state를 변경하면 App의 Btn의 모든 것이 다시 그려진다.
//그래서 우리가 할 수 있는 것은 React Memo이다.
//우리는 React에게 말해줄 수 있다. 컴포넌트가 다시 그려지는 것을 원치 않는다고.
console.log(text, "was rendered");
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "while",
padding: "10px 20px ",
bodder: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
const MemorizedBtn = React.memo(Btn);
//MemorizedBtn은 memo 버전의 버튼이 될 것이다.
//props가 변경되지 않았다면 렌더링 하지 말아 주세요~!
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");
//↑↑↑↑↑ 부모가 어떤 변경이라도 생기면
//↓↓↓↓↓ 자식은 모두 리렌더링 될 것이다. 이것은 추후에 나의 애플리케이션이 느려지게 만들 수 도 있다. 천개의 컴포넌트를 재 렌더링 한다고 생각해봐라!
return (
<div>
<MemorizedBtn text={value} changeValue={changeValue} />
<MemorizedBtn text="Continue" />
//React Memo를 통해서 2번째 컴포넌트가 다시 그려지는 것을 원치
않는다고 말할 수 있다. //**props가 변경되지 않는다는 점에 한에서..
//두번째 props가 변경되지 않는다면 render를 하지 말아줘 라고 부탁
가능하다.
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
최강 프론트엔드 개발자가 되고싶은 안유진 입니다