Inflearn Community Q&A

해당 강의는 거의 다들었는데 아직 헷갈리는게 있어서 질문드립니다.  조금 헷갈리는게 있습니다.

리액트는 똑똑해서 return 안에서 바뀐 부분만 리랜더링을 일으키고 가상돔에 적용시킨뒤 실제돔과 비교해서 실제돔에 바뀐 부분을 적용시켜주는 것으로 알고 있습니다. 

1. return안에서 바뀐 부분을 리랜더링한다는 것은 return안에서 태그의 attribute에 할당된 값들(value, onClick, onChange 등등)이 바꼈을 때 해당 태그만 리랜더링 한다는 뜻인가요?

2. react devtools에서 highlighting 기능으로 보면 실제 돔에 적용되는 부분이 하이라이팅 되는게 아니라 어떤 컴포넌트안에서 어떤 태그가 리랜더링되었는지 표시해주는 것인가요?? 아니면 태그하나라도 바뀌면 해당 컴포넌트 전체가 하이라팅 되는건가요

3. 밑의 코드에서 ul태그안의 onClick 부분을 최적화시켜줄려면 어떤식으로 useCallback을 써줘야 하나요? 

import { useCallback, useState } from "react";

const initialCandies = ["snickers", "skittles", "twix", "milky way"];

function CandyDispenser() {
  const [candies, setCandies] = useState(initialCandies);
  const dispense = (candy) => {
    setCandies((prevCandies) => prevCandies.filter((c) => c !== candy));
  };

  return (
    <>
      <div>Available Candy</div>
      {candies.length === 0 ? (
        <button onClick={() => setCandies(initialCandies)}>refill</button>
      ) : (
        <ul>
          {candies.map((candy) => (
            <li key={candy}>
              <button onClick={() => dispense(candy)}>grap</button> {candy}
            </li>
          ))}
        </ul>
      )}
    </>
  );
}

export default CandyDispenser;