whatisthis?
React. React Js - Memo 본문
React. React Js - props
props를 사용하는 방법 props = 부모 컴포넌트로부터 자식 컴포넌트에게 데이터를 전송하는 방식. (부모->자식) 부모에 props를 사용하면 자식 컴포넌트(함수)의 인자로 props 객체가 들어가게 됨
mywebproject.tistory.com
지난 포스팅인 props의 예제를 이어서 진행함.
지난시간에 했던 것을 복습해보자.
Btn 컴포넌트를 설정하는 App 컴포넌트에서
return (
<div>
<Btn text= "Save Changes" />
<Btn text="Continue" />
</div>
);
위와 같이 text라는 property를 주고,
(text 대신 banana라고 이름 붙여도 ok. 이름은 상관 X)
function Btn({text}) {
return (
<button
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
Btn 컴포넌트에서 props라는 파라미터(=객체임)
의 text를 받아와서 버튼의 inner텍스트로 사용하는 것을 했었다.
function Btn(props) / {props.text}는
function Btn({text}) / {text}와 같다.
이번 시간에는 onclick시 버튼의 텍스트가 바뀌는 기능을 구현해보자.
function App() {
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => {
setValue("Revert Changes");
};
우선, useState를 사용하여 버튼 클릭시 setValue함수가 실행되고,
value의 값이 바뀌도록 한다.
return (
<div>
<Btn changeValue={changeValue} text={value} />
<Btn text="Continue" />
</div>
);
첫번째 버튼은
기본 텍스트는 {value}의 초기값, 즉 "Save Changes"이고
setValue 함수가 실행되도록 하는 changeValue함수로 인해 "Revert Changes"로 변하게 된다.
여기서, changeValue = {changeValue}를 살펴보면
{}안에 들어간 changeValue는 위에서 선언한 함수를 의미하고,
= 연산자 전에 있는 changeValue 는 prop으로 사용할 이름이다.
❗❗❗
단, 위와 같이 작성한 것은
Btn에 직접 한것이 아니고 App컴포넌트에 한 것이라서
이벤트리스너를 붙인게 아닌, 컴포넌트에 changeValue 라는 프롭을 전달한 것 뿐이다.
따라서, Btn 컴포넌트의 파라미터에 changeValue 를 추가하고,
return부분에 직접
onclick = { changeValue } 를 해줘야
onclick시 changeValue 함수가 실행된다.
function Btn({ text, changeValue }) {
return (
<button
onClick={changeValue}
style={{
backgroundColor: "tomato",
color: "white",
padding: "10px 20px",
border: 0,
borderRadius: 10,
}}
>
{text}
</button>
);
}
전체 코드 🔻
<!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">
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>
<Btn changeValue={changeValue} text={value} />
<Btn text="Continue" />
</div>
);
}
const root = document.getElementById("root");
ReactDOM.render(<App />, root);
</script>
</html>
![](https://blog.kakaocdn.net/dn/UAAqW/btrtCVJUVXH/r8WKVXLpyAYJN1J97oDg01/img.png)
📌 React.memo()
위 코드를 보면 우리는 첫번째 Btn만 변경했는데,
useState에 의해 다시한번 컴포넌트가 재실행되면서,
Continue 버튼은 변경되지 않았음에도 다시한번 리렌더링 된다.
>> 이는 비효율적일 수 있음.
이럴때는 react의 memo를 사용하자.
const MemorizedBtn = React.memo(Btn);
React.memo(컴포넌트명)을 해주면
리액트가 memorize해놨다가, 변경된 부분만 리렌더링 하게 된다.
Ref.
ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders
React Fundamentals
nomadcoders.co
'WEB STUDY > REACT' 카테고리의 다른 글
React. create-react-app 셋업 (0) | 2022.02.18 |
---|---|
React. React Js - PropTypes (0) | 2022.02.18 |
React. React Js - props (0) | 2022.02.16 |
React. React JS - Unit Converter (기능추가+a) (0) | 2022.02.16 |
React. React Js - State Functions (current의 이용) (0) | 2022.02.15 |