[2장][김효중] 리액트 핵심 요소 깊게 살펴보기
Closed this issue · 2 comments
khj0426 commented
퀴즈
import "./styles.css";
import { memo, useEffect, useState } from "react";
const Child = memo(() => {
return <li>반갑습니다</li>;
});
export default function App() {
const [state, setState] = useState(0);
const arr = [1, 2, 3];
const handleClickButton = () => {
setState((prev) => prev + 1);
};
return (
<div className="App">
<button onClick={handleClickButton}>{state}+</button>
<ul>
{arr.map((_, index) => (
<Child />
))}
</ul>
<ul>
{arr.map((_, index) => (
<Child key={Math.random()} />
))}
</ul>
</div>
);
}
버튼을 누르면 다시 렌더링이 일어나는 부분은 어디일까요?
- key가 Math.random인 부분
- key가 없는 부분
- 둘 다 일어나지 않는다.
- 둘 다 일어난다.
리액트로 컴포넌트를 다음과 같이 짠다면 어떻게 자바스크립트로 변환되나요?
const Component = () => {
return <div>하하하</div>
}
답
정답
정답 설명
댓글 작성법
(다음과 같이 답을 작성해 댓글로 달아주세요)
<details>
<summary>정답</summary>
<div markdown="1">
정답 설명
</div>
</details>
hayamaster commented
-
버튼을 누르면 다시 렌더링이 일어나는 부분은 어디일까요?
A: key가 Math.random인 부분 -
리액트로 컴포넌트를 다음과 같이 짠다면 어떻게 자바스크립트로 변환되나요?
A: 잘모르겠어요...
hyoribogo commented
key가 Math.random인 부분 ? 헷갈림
const Component = React.createComponent('div', null, '하하하')