미라클 메모리

목차

컴포넌트의 렌더링

• 전체코드

페이지에 그려진 UI와 코드를 함께 보자

Ui

Component

		<div>
        <h2>카운트 </h2>
        <Countview count={count} />
        <button onClick={() => setCount(count + 1)}>+</button>
      </div>

      <div>
        <h2>Text</h2>
        <Textview text={text} />
        <input value={text} onChange={(e) => setText(e.target.value)} />
      </div>
		</div>

<Countview count={count} />
...
<Textview text={text} />
...

현재 + 버튼을 누를 경우 count의 상태값이 변경되며 props를 통해서 countview컴포넌트에 넘겨준다 또한 input창에 텍스트 값을 입력할 경우 역시 text의 상태값이 변경되며 이를 Textview컴포넌트에 전달한다. 값이 전달되는 순간, onChange, onClick이벤트가 발생함에 따라서 상태값이 변경되어 컴포넌트는 리렌더링된다.

Textview 컴포넌트 그리고 Countview 컴포넌트의 데이터 흐름

const [count, setCount] = useState(1);
const [text, setText] = useState("");

  const Textview = ({ text }) => {
    useEffect(() => {
      console.log(`Mount Text: ${text}`);
    });
    return <div>{text}</div>;
  };

  const Countview = ({ count }) => {
    useEffect(() => {
      console.log(`Mount Count: ${count}`);
    });
    return <div>{count}</div>;
  };

props를 통해서 상태값이 변경될 경우 useEffect 의 mount가 호출되어 변경된 값을 호출할 예정이다. 이때 텍스트 값이나 혹은 카운터의 값이 변경되면 어떤 변화가 있는지 확인해보자.

리렌더링

컴포넌트가 리렌더링 되는 조건을 알아보자 대표적으로 알아야 할 것은 3가지이다.

[react] 리렌더링이 되는 조건들 살펴보기