state와 ref의 차이점 state와 ref의 차이점 제목 그대로 state와 ref의 차이점에 대해서 정리해보려고 한다. 코드 수정 중에 왜 ref를 state로 바꿔서 사용했는가?라는 질문을 받아서 정리해 보는 글이다. 가볍게 내가 보기 위해서 react에서 state와 ref의 차이는 우선 정의는 state는 '컴포넌트 내에서 관리되는 데이터 객체' ref는 'DOM에 이름을 달아주는 것으로, DOM에 직접 접근하고 싶을 때 사용' 인데, 그냥 useRef(false) 이렇게도 사용가능 보통 질문의 의도는 state는 리렌더링이 필요한, 즉 변경 시 렌더링이 되어야 하는 값을 다룰 때 사용하고 ref는 리렌더링을 발생시키지 않아도 되는 값을 다룰 때 사용합니다. 여기서 문제 ref는 왜 리렌더링이 안될까요?? ref가 리렌.. React v18에선 이제 안써요!!"ReactDOM.render is no longer supported in React 18" 현재 기준 리액트는 Version 18.1.0이 공개돼 있다. CRA(create-react-app)로 React 프로젝트를 생성하면 18.1.0 버전이 다운로드하여진다. 하지만 버전이 달라지면 항상 이전 버전에서 더 이상 사용하지 않는 것들이 발생하게 되는데, 18.0.0 버전부터 ReactDOM.render을 사용하지 않는다는 에러가 나온다. 사실 아직 나는 한 번도 보지 못했는데, 동기분의 에러 메시지를 통해 처음 알게 되었다. 17 버전 이하를 사용하다 18 버전으로 버전업을 한다고 했을 때 만날 수 있는 에러라고 생각해서 정리를 하려고 마음을 먹었다. ReactDOM.render는 index.js 파일에서 찾아볼 수 있는데, 우리가 흔히 보던 React의 index.js 내부 내용이다.(조금 간.. 'Uncaught Error: useLocation() may be used only in the context of a <Router> component.' 에러 해결방법 MBTI 테스트 같은 테스트를 만들고 있는 과정에서 home 페이지에서 test 페이지로 그리고 test 페이지에서 result 페이지로 이동할 때 매끄러운 Page Transition을 주기 위해서 AnimatePresence를 Router에 사용했는데 그 때 에러가 발생했다. App.tsx function App() { const location = useLocation(); return ( ); } 맨 처음에는 이런 식으로 코드를 짰는데 계속해서 'Uncaught Error: useLocation() may be used only in the context of a component.' 에러가 발생했다. 그래서 구글링을 통해 StackOverFlow 에서 해결 방법을 찾아낼 수 있었다. 답변은 in.. 이전 1 다음
