Props
- props란 같은 함수에서 text만 바꾸고 싶을 때 color를 바꾸고 싶을 때 등 특정한 부분만 바꾸려고 할 때 사용.
Props를 사용하는 이유
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.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 type="text/babel">
const root = document.getElementById("root");
function Btn(props) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{props.banana}
</button>
);
}
function App() {
return (
<div>
<Btn banana="Save Changes" />
<Btn banana="Continue"/>
</div>
)
};
ReactDOM.render(<App />, root);
</script>
</html>
- 위 코드에서 Btn이라는 함수에서 text만 각각 Save Changes, Continue로 바꾸고 싶을 때 banana라는 인자를 받아 props라는 오브젝트로 바꿀 수 있음.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.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 type="text/babel">
const root = document.getElementById("root");
function Btn({ text, big }) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
fontSize: big ? 18 : 12
}}>
{text}
</button>
);
}
function App() {
return (
<div>
<Btn text="Save Changes" big={true} />
<Btn text="Continue"big={false} />
</div>
)
};
ReactDOM.render(<App />, root);
</script>
</html>
- 이런식으로 text와 big 두개의 설정을 가질 수도 있음.
Props와 State 사용하기
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.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 type="text/babel">
const root = document.getElementById("root");
function Btn({ text ,changeValue }) {
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 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>
)
};
ReactDOM.render(<App />, root);
</script>
</html>
Memorize
- 위 코드에서 보면 Save Changes 부분은 state로 인해서 바뀌어서 re-render가 이루어져야 하는데 반해 Continue 부분은 바뀌지 않았기 때문에 re-render가 이루어질 필요가 없음.
- 불필요한 re-render는 속도가 느려지는 원인이 됨.
- Memorize 기능을 사용해서 바뀌지 않는 부분은 re-render할 필요 없게 만드는 기능을 함.
<!DOCTYPE html>
<html>
<body>
<div id="root"></div>
</body>
<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.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 type="text/babel">
const root = document.getElementById("root");
function Btn({ text ,changeValue }) {
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}>
{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} changeValue={changeValue}/>
<MemorizedBtn text="Continue" />
</div>
)
};
ReactDOM.render(<App />, root);
</script>
</html>
- MemorizedBtn은 Btn을 받고 React.memo로 memorize 기능을 사용하고 컴포넌트의 이름은 MemorizedBtn로 바꿔줘야 함.
