인프런 커뮤니티 질문&답변

import React, { useEffect, useState } from "react";

const ImageView = ({ image }) => {
  useEffect(() => {
    console.log("이미지이펙트");
  });
  console.log("image");
  return <div>{image}</div>;
};

const TextView = React.memo(({ text }) => {
  useEffect(() => {
    console.log("텍스트 이펙트");
  }, []);
  console.log("text");
  return <div>{text}</div>;
});
const CountView = React.memo(({ count }) => {
  useEffect(() => {
    console.log("카운트이펙트");
  });
  return <div>{count}</div>;
});

const OptimizeTest = () => {
  const [count, setCount] = useState(1);
  const [text, setText] = useState("");
  const [image, setImage] = useState(5);
  return (
    <div style={{ padding: 50 }}>
      <ImageView image={image} />
      <h2>count</h2>
      <CountView count={count} />
      <button onClick={() => setCount(count + 1)}>+</button>
      <div>
        <h2>text</h2>
        <TextView text={text} />
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
    </div>
  );
};

export default OptimizeTest;

OptimizeTest가 App.js 자식으로 있는데 콘솔 창 보면 희한한 결과가 나옵니다. image랑 이미지이펙트가 2번 찍히는데 이유를 모르겠습니다. index.js strict 모드도 아닙니다.

또한 실행 순서가 궁금한데 이미지이펙트가 콘솔창보면 image보다 늦게 찍히고 텍스트 이펙트가 text보다도 늦게 찍히는데 이 이유도 궁금합니다.