# 166 [udemy React 완벽 가이드 노트] Recap (React rendering, React.memo, useCallback)

리액트는 state, props, context등을 이용 하는 JSX를 통해

컴포넌트의 출력이 무엇인지 알려주는 일을 한다.  

state, props는 state의 변경이 일어나게 한다. 

 

1. 스테이트 변경 

---

컴포넌트 변경과,

컴포넌트에 영향을 주거나 애플리케이션 일부에 영향을 주는  데이터 변경은 

결국 스테이트의 변경을 가져오게 된다. 

 

 

2. 컴포넌트 재평가,  함수 재실행

---

컴포넌트에서 state를 변경할 때마다 

변경된 state가 있는 컴포넌트는 재평가 된다. 

즉, 컴포넌트 함수가 재실행 된다. 

 

 

3. 새로운 output

---

그러면 새로운 output, 즉 새로운 출력값을 얻는다. 

비슷해 보이지만 실제로는 다르다. (단락이 렌더링 되거나 안될 수가 있다.)

 

function App() {
  const [showParagraph, setShowParagraph] = useState(false);
  const [allowToggle, setAllowToggle] = useState(false);

  console.log("APP RUNNING");

  const toggleParagraphHandler = useCallback(() => {
    if (allowToggle) {
      setShowParagraph(prevShowParagraph => !prevShowParagraph);
    }
  }, []);

  const allowToggleHandler = () => {
    setAllowToggle(true);
  };

  return (
    <div className="app">
      <h1>Hi there!</h1>
      <DemoOutput show={showParagraph} />
      <Button onClick={allowToggleHandler}>AllowToggling</Button>
      <Button onClick={allowParagraphHandler}>Toggle Paragraph!</Button>
    </div>
  );
}

 

 

 

4. 변경 리액트 DOM에 전달

---

리액트는 모든 컴포넌트의

최신 평가의 결과를 가져와서

직전 평가 결과와 비교한다. 

 

그리고 확인된 변경이나 차이점을 

리액트 DOM에 전달한다. 

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

 

 

5. 브라우저 실제 DOM에 적용

---

ReactDOM은 변경사항을 

브라우저 실제 DOM에 적용하고, 

변경되지 않은 것은 그대로 둔다. 

 

 

 

 

* 컴포넌트 재평가 할 때

---

리액트가 컴포넌트를 재평가 할 때

전체 함수를 재실행하고 

가장 최신의 JSX코드 스냅샷을 통해 JSX코드를 리빌드 한다. 

 

모든 JSX코드를 재실행 하게 된다.

 

 

 

* 불필요한 재 렌더링 막기 React.memo (객체는 계속 변경으로 인식됨)

---

불필요한 하위 컴포넌트 재렌더링을 막기 위해 React.memo를 사용한다.  

 React.memo는  props가 실제 변경되었을 때만 재렌더링 하게 도와주는 메서드다. 

변경이 안되었으면 함수가 재실행 되지 않는다. 

 

 

컴포넌트 재평가는 컴포넌트 함수 전체의 재실행을 의미한다. 

함수 안에 함수를 만들고 props로 자식 컴포넌트에 전달하면 

계속 새로운 함수객체를 얻기 때문에 React.memo를 사용하더라도 

props가 변경된 것으로 포착되어 재렌더링 된다. 

 

(왜냐하면 함수객체는 참조값이고, 계속 다른 값으로 인식 되기 때문)

 

 

 const toggleParagraphHandler = useCallback(() => {
    if (allowToggle) {
      setShowParagraph(prevShowParagraph => !prevShowParagraph);
    }
  }, []);

 

 

* useCallback

---

그러면 useCallback을 함께 써서 

리액트에게 함수를 저장하고 그 안을 둘러싼 함수가 

dependencies가 변경된 경우가 아니라면

재실행 되어도 함수 재생성을 하지 않도록 한다.

 

 

 

 

다음강에서...

▶ state변경으로 인해 App함수가 재실행 되면 useState 역시 계속 재실행 되는가?

▶이것은 useState의 상태 초기화를 의미 하는가?

 

왜 이런 문제는 없는 것인가?