2022. 9. 14. 17:00ㆍReact/ReactJS로 영화 웹 서비스 만들기
props에 무엇을 넣어볼 수 있는지 보자.
이때까지 한 것으로는 true, false, string, function 등...
Btn을 렌더링하는 컴포넌트가 어떻게 되는지 알아보자.
ex) 부모 컴포넌트가 state를 변경할때 어떤 일이 일어나는지 보자.
우선 여기서 잠깐!
여기에서 전달되는 onClick은 onClick함수가 아닌, prop이라는 것을 꼭 인지하여야한다.
자 그러면, 혼란을 맊기 위해 changeValue라고 이름을 바꾸자.
<!DOCTYPE html>
<html lang="en">
<body>
<div id="root"></div>
</body>
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/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>
)
}
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>
그럼 위와 같이 Save Changes를 클릭하면 Revert Changes로 바뀌는 것을 알 수 있다.
꼭 명심해야하는 것은
이곳에 prop으로서 넣는다고하면 자동적으로 return안으로는 안들어간다는 점!
그래서 항상 아래와 같이 써줘야 사용할 수 있다는 점을 알 수 있다.
자 그러면 chnageValue를 onClick으로 변경하여 주고,
console로 render되는 것을 확인해보자.
그런데 여기서 Continue는 render되지 않아도 되는데 render가 다시 되어지는 것을 확인할 수 있다.
이 케이스에서는 부모가 state를 변경하고 있고, 있는 것을 모두 다시 그린다.
그래서 우리는 React Memo라는 것을 사용할 수 있다.
이를 이용하면 컴포넌트를 다시 그릴지 아닐지를 결정할 수 있다.
prop이 변경되지 않는 한에서!!
첫번째 버튼의 props는 바뀔것이다. 왜냐하면 첫번째 버튼의 props는 state와 연결되어있기 때문에!
그래서 이것들이 변경되면
const [value, setValue] = React.useState("Save Changes");
const changeValue = () => setValue("Revert Changes");이것도 변경되어야한다. 왜냐하면 props는 바뀌고 있기 때문에!
<Btn text={value} onClick={changeValue} />그러나 아래는 절대 바뀌지 않는다.
<Btn text="Continue" />
그래서 이를 위해 React Memo를 사용할 것이다.
그리고 Btn 컴포넌트를 만들것이다.
그리고 다음과 같이 작성하면된다.
그러면 Save Changes버튼을 클릭하면, Continue가 다시 render되지 않았음을 확인할 수 있다.
원래는 parent가 변경될 시 모든 child가 변경되어야하는데,
이것은 추후에 application의 느려지는 원인이 될 수 있다.
그래서 React.memo를 사용해서 일부만 업데이트 할 수 있도록 하는 것이다!
'React > ReactJS로 영화 웹 서비스 만들기' 카테고리의 다른 글
| 4.3 Recap (0) | 2022.09.15 |
|---|---|
| 4.2 Prop Types (2) | 2022.09.15 |
| 4.0 Props (0) | 2022.09.14 |
| 3.9 Final Practice and Recap (0) | 2022.09.14 |
| 3.8 Recap (0) | 2022.09.14 |