개발/React 2

[React] useNavigate으로 props을 주기

useHistory, useNavigate 버튼을 누르면서 해당 페이지를 넘어갈 때 props를 주면서 넘어가야 되는 경우가 있다. 이 때문에 useHistory라는 것을 찾아봤는데, react-router-dom이 6버전으로 바뀌면서 useHistory의 기능인 go, goBack, goForward의 내용을 모두 navigate으로 통일시켰다. 그리고 이를 index로 넣음으로 해결했다. useHistory를 그 전 버전동안 계속 사용해서 그런지 내용이 많아 useHistory을 이용하여 처음에 구현하였지만 버전에 맞지 않아 오류가 생겼다. 이에 useNavigate로 바꾸어서 할려고 했지만 생각보다 내용이 많지 않아 적어본다. 해당 오류 Failed to compile ./src/pages/User..

개발/React 2024.01.31

[React] useState와 useReducer의 차이점

React의 Hook 기능 React v16.8에 새롭게 Hooks라는 기능이 도입되었다. Hooks는 함수형 컴포넌트에 state를 제공함으로써 상태 관련 로직의 재사용을 이전보다 훨씬 쉽게 만들어준다. Hook안에 useState와 useEffect가 있다. useState 함수에 state를 제공한다. initialState를 파라미터로 받고, state와 state를 변경할 setState 함수를 반환한다. [첫번째 인자, 두번째 인자] 형태로 구현하고, 두 인자를 useState로 초기값을 준 다음, 두번째 인자를 활용하여 첫번째 인자의 값을 바꿔준다. import { useState } from 'react'; const Example = () => { const [count, setCount..

개발/React 2024.01.29