박레고의 이야기

React 버전을 업그레이드한 뒤, 로컬에서는 잘 되지만 실제 배포(프로덕션) 환경에 반영됐는지 궁금할 때가 있습니다.이럴 때 여러방법 중 간단히 확인할 수 있는 두 가지만 소개합니다.1. React DevTools 확장으로 확인React Developer Tools 크롬 확장 설치→ React DevTools 다운로드프로덕션 사이트 접속 후, 개발자 도구에서 Components 탭 열기오른쪽 상단에 React vxx.x.x 버전이 표시됩니다 2. 개발자 도구(F12) 에서 확인window.__REACT_DEVTOOLS_GLOBAL_HOOK__.renderers.forEach(r => console.log(r.version));

Youtube를 보다가 'Top 6 React Hook Mistakes Beginners Make' 라는 관심을 가질 만한 영상을 찾았다. 이 영상을 보고 나는 얼마나 실수를 하고 있으며, 실수를 하고 있다면 고치기 위하여 해당 내용을 정리하면서 포스팅하기로 하였다. 리액트 훅은 기본적으로 알고 있다고 생각하고 진행하겠다. 1. Using state when you don't need itimport React, { useState } from "react";function Mistakes() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); function onSubmit(e) { e...

1.  useState리액트에서 상태관리라고 하면, 가장 먼저 떠오르는 hooks 중 하나로 useState를 뽑을 수 있다.컴포넌트에서 state를 동적으로 관리하기 위해서 자주 사용되는 함수이다.// 사용방법const [state, setState] = useState(initialState);// 예시const [name, setName] = useState("");// 초기값console.log(name); // ''// name state 재할당setName("박레고");// 랜더링 이후console.log(name); // 박레고setName함수를 통해 name의 값을 변경해줄 수 있다. setName은 상태 값을 갱신해주는 Setter 함수라고 한다. 2.  useReducer그렇다면, us..