2시간 날렸..
호기심은 개발에 원동력이고,
이러한 원동력은 내가 재밌게 개발하게 해준다.
혼자 그냥 간단하게 프로젝트를 하고있었다.
To do list 이런것 만들고 있었다. 타입스크립트로.
그리고 거기다가 css적으로 이쁘게 하는 것을 연습하기 위해서,
react-beautiful-dnd 패키지도 다운받았다.
그런데 다 순조롭게 되고 있었다. 목록에서 투두리스트가 드래그가 갑자기 안되었다.
되다가 안되다가를 반복했다. 이상했다.
아니 왜? 드래그 기능 하려고 뼈빠지게 유튜브보고 구글링하면서 했는데 왜안되지?
하아..코드 틀린것 없는데..뭐지...
에러난 부분을 복사해서 구글링해보았다.
React.StrictMode가 기능을 막고있다고 써있었다... 후...
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);저기서 저게 문제라고 한다, React.StrictMode..
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
const root = ReactDOM.createRoot(
document.getElementById("root") as HTMLElement
);
root.render(
<>
<App />
</>
);이렇게 다시 만들어주니까 되다안되다가 불안정하게 동작 하던 것이 잘 되었다!!
저것은 무슨 힘을 가진것일까?
그녀석의 역할.
공식문서에 따르면: React.StrictMode 는 나같이 개발하던 사람들에게는 눈에보이는데, 배포하고 나서는 저게 없어진다고 한다. 신기하네.
그녀석의 조심성.
그녀석 (React.StrictMode)는 우리에게 경고를 주는 것이다. 잘되라고 엄마같이 잘 챙겨주는 뜻인것같다. 하지만 뜻밖의 과보호는 우리를 에러의 바다에 넣고 왜 안될까라는 질문을 수십번 수백번 수천번 반복하면서 있게한다.
리액트는 렌더링 과 커밋 단계 두개로 동작한다.
랜더링 단계: render함수 (return)호출해서 이전 렌더와 비교 수행하는 단계.
커밋 단계: 라이프사이클 함수를 실행시키며 DOM 노드를 추가 또는 변경해주는 단계. 이것은 렌더링 보다 빠르다.
만약 렌더링이 느릴경우에, 그녀석이 개입해서 문제가 될만한 것들을 2번 실행해서 부작용을 잡아준다. 이것을 Double-Invoke방식이라고 한다. 그녀석이 개입해서 Double-Invoke를 하는데, 만약에 첫번째 시도와 두번째 시도를 했을 때 코드가 다르다? 그러면 문제가 있는 코드라는 것이다. 통 class component의 생명 주기 메소드인 componentWillMount()나 componentWillUpdate() 등에서 이런 형태가 나타나지만 setState에서 역시 이러한 현상들이 나타납니다. 당연히 setState와 같은 기능으로 사용되는 useState에서도 이러한 현상이 나타나는 경우가 있다.
리액트 공식 홈페이지 (https://ko.reactjs.org/docs/strict-mode.html)에서 이럴때 도움이 된다고 한다.
- 안전하지 않은 생명주기를 사용하는 컴포넌트 발견
- 레거시 문자열 ref 사용에 대한 경고
- 권장되지 않는 findDOMNode 사용에 대한 경고
- 예상치 못한 부작용 검사
- 레거시 context API 검사
주로 발생하는 함수:
- 클래스 컴포넌트의 constructor, render 그리고 shouldComponentUpdate
- 클래스 컴포넌트의 getDrivedStateFromProps static 메서드
- 함수 컴포넌트 바디
- State updater 함수(setState 의 첫 번째 인자)
- useState, useMemo, useReducer 에 전달되는 함수
그리고 내가 만든 투두리스트가 문제가 된 이유중 하나가 저녀석 때문이긴 하지만...얼마전에 리액트가 버전 업데이트했는데, 패키지 또한 새 버전에 맞게 업데이트를 해줘야하는데 못해줘서 그런것도 있다고 스택오버플로우에서 그런다..
