11월 23일 React 에러 해결
React 코드를 작성 후 npm start를 실행하니까 위 사진과 같은 에러가 났다.
구글링 결과 package.json에 scrips에 start가 빠져있을거라는 말이 있어서
package.json을 뒤져보았으나 start 스크립트를 수정해도 여전했다.
npx create-react-app 으로 생성한 프로젝트가 myclock 인데 상위 디렉토리인 MYCLOCK에서 npm start를 하고있었으니, MYCLOCK에는 node_modules와 package.json이 없어서 에디터가 start 스크립트를 찾지 못한 것. 하위 디렉토리로 이동해서 npm start를 하니 해결됐다.
그 다음 마주한 에러
이건 뭐 그냥 시키는대로 했다.
1,2번 라인의 import 문을 위로 올려주니 해결됐다. 찾아보니 라이브러리들을 가져오는 import가 상단에, 컴포넌트를 가져오는 import는 하단에 배치해야 한다고 한다. 근데 Clock이 컴포넌트 아닌가? 아직 컴포넌트에 대해 잘 몰라서 모르겠다. 멘토에게 물어볼 예정
그리고 실행했더니 콘솔창에 나오는 오류
setInterval( () => {
ReactDOM.render(
<React.StrictMode>
<Clock />
</React.StrictMode>,
document.getElementById('root')
);
},1000);
력하세요React는 컴포넌트를 렌더링 하고, 컴포넌트가 엘리먼트들을 생성한다. 엘리먼트는 중간에 변경할 수 없다. 그래서 엘리먼트를 변경하고 싶으면 새 엘리먼트를 생성하여 기존의 엘리먼트를 대체해야 한다.
따라서 위 코드의 setInterval 함수는 Clock 컴포넌트를 가져와 root elements를 1000밀리초 마다 한번씩 생성해서 대체한다.
콘솔창 왼쪽에 오류가 나타나는 횟수가 1000밀리초 마다 올라가는걸 보니 setInterval함수가 계속 호출되기는 하는 것 같아서 찾아보니, 스택 오버플로우에
와 같은 코멘트가 있다.
리액트 컴포넌트를 자동으로 생성해주는 rcc키워드를 사용했을 때 내 코드에는 'react-dom-client' 라고 되어있어서 client를 빼봤더니 정상 동작한다.
컴포넌트와 엘리먼트를 짧게 이해하는 시계. setInterval함수에서는 모던 자바스크립트에서 공부한 표준 빌트인 객체 Date를 new와 함께 생성자 함수로 호출했다
