리액트 스터디3 - Githubissues

컴포넌트가 새로 등장하면서 initialize 가 불려서 0이된다.

컴포넌트가 삭제되어서 state가 날아갔다.

2번에서는 기존컴포넌트가 삭제될 때 삭제 행위를 진행한다.(트리 삭제, state도 삭제) 1번에서는 기존컴포넌트가 트리상에서 삭제되지만, state는 트리 외부의 어딘가에 저장되기 때문에 남아있다가 사용되지않음을 감지해서 삭제한다.

1번이라고 생각한이유가 state가 컴포넌트에 저장되어있다고 생각해서 -> 컴포넌트가 다시불리면 initialize가 되니까 삭제 된것처럼 보인다 라고 생각함 근데, 위치만 유지되면 state가 유지되는 것을 보니, state는 별도로 저장되는 구조고, 트리상에 변화가 일어날때 state도 변화가 일어난다고 생각함

결국 상태가 삭제되는건 언제인지?

ui tree의 노드는 react element 이다. 각 element에서 useState를 사용하면 global workInProgress에 순서에 맞게 state를 저장한다.

ui tree 상의 element가 삭제될 때 state를 찾아서 삭제할것으로 예상된다.

import { useState } from 'react';

export default function App() {
  const [isFancy, setIsFancy] = useState(false);
  return (
    <div>
      {isFancy && <Counter isFancy={true} /> } --- A
      {!isFancy  && <Counter isFancy={false} /> }
      {isFancy ? <Counter isFancy={true} /> : <Counter isFancy={false} /> } --- B
      <label>
        <input
          type="checkbox"
          checked={isFancy}
          onChange={e => {
            setIsFancy(e.target.checked)
          }}
        />
        Use fancy styling
      </label>
    </div>
  );
}

function Counter({ isFancy }) {
  const [score, setScore] = useState(0);
  const [hover, setHover] = useState(false);

  let className = 'counter';
  if (hover) {
    className += ' hover';
  }
  if (isFancy) {
    className += ' fancy';
  }

  return (
    <div
      className={className}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
    >
      <h1>{score}</h1>
      <button onClick={() => setScore(score + 1)}>
        Add one
      </button>
    </div>
  );
}

A에서

트리리상의 위치가 변경된다. 왜냐하면, isFancy false일 때

false , 이고 isFancy true일 때 , false

이기 때문에 의 트리상의 위치가 변한다.

B에서

반면, B에서는 isFancy가 true일 때와 false일 때 모두 가 리턴되기 때문에 트리상의 위치가 똑같아서 상태가 유지된다.

flagtags / react-study

리액트 스터디3 #3

1.

A에서

B에서