react - key!!!

React

react - key!!!

jyeounjae 2022. 11. 26. 17:41

Reactでキーが重要な理由としては"re-rendering"をするため！

以下は、コンポーネントがランダムに出力される例です。

以下では、キーを指定した時のコンポーネント配置としない時のコンポーネントの

違いがわかります。

<!DOCTYPE html>
<html lang="en">
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script>
    <script type="text/babel">
      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: "learning" }
        ],
        [
          { id: 4, value: "learning" },
          { 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: "learning" }
        ],
        [
          { id: 2, value: "clean the bed" },
          { id: 3, value: "running" },
          { id: 1, value: "wash dishes" },
          { id: 4, value: "learning" }
        ]
      ];

      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((items) => items.filter((item) => item !== todo)); // todo로 넘어온 값이랑 같지 않으면 지우지 않는다
        };
        const handleRestoreClick = (todo) => {
          setItems((items) => [
            ...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 />, rootElement);
    </script>
  </body>
</html>

        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);
          };
        }, []);

useEffectを使ってランダムでコンポーネントを出力。

最初は下のキーが４のボタンにフォーカシングだったが、

{ id: 4, value: "learning" }

２番目の写真では、runningにフォーカスされていることがわかる。

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

うえは,buttonのdivにkeyを付与した。