[2장][김효중] 리액트 핵심 요소 깊게 살펴보기

[khj0426]

퀴즈

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]

1. 버튼을 누르면 다시 렌더링이 일어나는 부분은 어디일까요?
   A: key가 Math.random인 부분

2. 리액트로 컴포넌트를 다음과 같이 짠다면 어떻게 자바스크립트로 변환되나요?
   A: 잘모르겠어요...

[hyoribogo]

key가 Math.random인 부분 ? 헷갈림

const Component = React.createComponent('div', null, '하하하')