App.js 파일이 제대로 작동하도록 하려면 어떻게 해야 합니까?

Question

코딩이 처음이라 이 튜토리얼을 따르고 있습니다: https://www.sitepoint.com/react-tutorial-build-calculator-app/ 어떤 요소도 렌더링할 수 없습니다. 웹 애플리케이션을 실행할 때 콘솔에 표시되는 내용입니다

이것은 내 App.js 코드입니다:

으아악

다음은 index.js입니다:

import Wrapper from "./components/Wrapper.js";
import Screen from "./components/Screen.js";
import ButtonBox from "./components/ButtonBox.js";
import Button from "./components/Button.js";

const btnValues = [
  ["C", "+-", "%", "/"],
  [7, 8, 9, "X"],
  [4, 5, 6, "-"],
  [1, 2, 3, "+"],
  [0, ".", "="],
];

const App = () => {
  return (
    <Wrapper>
      <Screen value="0" />
      <ButtonBox>
        {
          btnValues.flat().map((btn, i) => {
            return (
              <Button
                key={i}
                className={btn === "=" ? "equals" : ""}
                value={btn}
                onClick={() => {
                  console.log(`${btn} clicked!`);
                }}
              />
            );
          })
        }
      </ButtonBox>
    </Wrapper>
  );
};

export default App;

Answer 1

다음과 같이 루트 요소를 지정해 보세요.

으아악

Answer 2

콘솔의 오류 메시지로 판단하면 index.js 파일의 import 문에 문제가 있는 것 같습니다. 이 오류는 특히 유효한 가져오기 경로가 아닌 "react-dom/client"에서 ReactDOM을 가져왔다고 명시합니다.

이 문제를 해결하려면 "react-dom/client" 대신 "react-dom"에서 ReactDOM을 가져오도록 index.js 파일의 import 문을 업데이트해야 합니다. 수정된 import 문은 다음과 같습니다.

으아악