React { Key }

Key와 리랜더링 관련해서 알아보기

const rootElement = document.getElementById('root');
    
    const todos = [
    [
      {id : 1, value: "Wash dishes"},
      {id : 2, value: "Clean the bed"},
      {id : 3, value: "Running"},
      {id : 4, value: "Studying"}
    ],
    [
      {id : 4, value: "Studying"},
      {id : 1, value: "Wash dishes"},
      {id : 2, value: "Clean the bed"},
      {id : 3, value: "Running"}
    ],
    [
      {id : 3, value: "Running"},
      {id : 1, value: "Wash dishes"},
      {id : 2, value: "Clean the bed"},
      {id : 4, value: "Studying"}
    ],
    [
      {id : 2, value: "Clean the bed"},
      {id : 1, value: "Wash dishes"},
      {id : 3, value: "Running"},
      {id : 4, value: "Studying"}
    ]
  ];

    const App = () => {
      const [items, setItems] = React.useState(todos[0]);
      
      React.useEffect(() => {
        const interval = setInterval(() => {
          const random = Math.floor(Math.random() * 3 )
          setItems(todos[random]);
        }, 1000);

        return () => {
          clearInterval(interval);
        };
      }, []);

      const handleDoneClick = (todo) => {
        setItems(item => items.filter((i) => i !==todo));
      };

      const handleRestoreClick = (todo) => {
        setItems(item => [...items, todos.find(item => !items.includes(item))]);
      };

      return (
      <>
        {items.map((todo) => 
          <div key={todo.id}>
            <button onClick={() => handleDoneClick(todo)}>
                {todo.value}
              </button>
          </div>)}
          <br/>
          <br/>
          <button onClick={handleRestoreClick}>Restore</button>
      </>
      );
    };

  ReactDOM.render(<App />, document.getElementById("root"));

 

 

 

 

 

위 코드는 대강 요약하자면 Todo 리스트를 1초마다 아이템들 배열을 바꾸는 코드다. 하지만 Tab키를 눌러서 하이라이트 된 구간이 좌측 움짤처럼 계속 같은 인덱스인게 있고 요소가 재배열되고나서 하이라이트가 따라가는 경우가 이렇게 있다. 상식적으로 재배열이 되면 하이라이트가 따라가는게 옳지않은가 ? 여기서 Key와 리렌더링에 관련하여 이야기 할것이 있다. 리액트는 일단 자식요소들에 key값을 부여하기를 권장한다.

 

 

 

React는 같은 타입의 요소들을 리렌더링할때 기존 트리와 이후 트리의 자식들의 key값을 비교하고, 그걸 통해 따라가기때문에  위 실습 코드는 아이템 각 요소별로 id값을 미리 지정해놨고 key값에 그 id값을 할당했기 때문에 밑에 움짤처럼 하이라이트도 따라간다.  하지만 key값에 그냥 배열의 index값같은 바뀌는 값을 넣으면 첫번째 움짤처럼 value와 key가 따로놀게된다. 

여기서 우리가 배운점 재사용을 위해서는 key값을 제대로 줘야한다. 

                                   제대로 준다는 것은 중복없고 바뀌지않는 값들을 의미한다. 

 

 

 

 

 

 

https://ko.reactjs.org/docs/reconciliation.html#gatsby-focus-wrapper

재조정 (Reconciliation) – React