본문 바로가기

React

React - useReducer Hook에 대해
React - useReducer Hook에 대해 2022. 8. 19. useState vs useReducer 언제 useState와 useReducer를 사용해야 할까? useState 사용 시 첫 번째 예제 : 하나의 함수에서 여러개의 state들을 업데이트 하는 상황이 있다고 가정해보자. loading, post, error 3가지 state를 통해 포스트를 불러와야 한다. 다음과 같이 버튼을 누르면 데이터를 받아오는 코드를 작성해보자. BEFORE import { useState } from 'react' const Test = () => { const [loading, setLoading] = useState(false) const [post, setPost] = useState({}) const [error, setError] = useState(false) c..
React - nextjs 사용 시 Parsing error : Cannot find module 'next/babel' 오류 해결방법
React - nextjs 사용 시 Parsing error : Cannot find module 'next/babel' 오류 해결방법 2021. 11. 13. 문제점 이런 식으로 대부분의 파일에서 1 problem이 발견되었다고 나타나는 경우가 있다. 하지만 무엇이 문제인지 나타나지 않기 때문에 어떤 오류인지 확인하기 위해 Ctrl + Shift + M을 눌러보면 next/babel 모듈을 찾을 수 없다는 오류라고 나타나있다. 해결방법 먼저 루트 directory에 .babelrc 파일을 생성하고 아래 코드를 추가한다. { "presets": ["next/babel"], "plugins": [] } 그리고 .eslintrc.json 파일이 있을텐데, 아래 코드로 변경한다 { "extends": ["next/babel"] }
React - react-router-dom의 Switch 사용 시 주의사항
React - react-router-dom의 Switch 사용 시 주의사항 2021. 9. 16. 문제 {user ? : } 로그인 페이지가 Topbar 컴포넌트의 영향을 받지 않도록 Login을 따로 빼주고, 그 아래에 Topbar와 나머지 컴포넌트를 묶은 div를 배치했을 때, 어떻게해도 Topbar를 제외한 나머지가 보이지 않는 문제가 있었습니다. 해결방법 찾아본 결과, Switch는 바로 아래에 있는 first-level의 컴포넌트만을 위해 작동하며 전체 트리를 순회하지 않기 때문에 나머지가 보이지 않았습니다. 따라서 React fragment를 사용해서 하나로 묶어준 결과 제대로 작동하는 것을 볼 수 있었습니다. {user ? : } {user && ( )}
React - useEffect 사용 시 array를 dependency로 사용했을 시 나타나는 경고
React - useEffect 사용 시 array를 dependency로 사용했을 시 나타나는 경고 2021. 9. 16. 나타난 경고 사이드 프로젝트를 하던 중 useEffect 사용 시 못보던 경고가 나타났습니다 const MONTHS = [ '1월', '2월', '3월', '4월', '5월', '6월', '7월', '8월', '9월', '10월', '11월', '12월', ] useEffect(() => { const getStats = async () => { try { const res = await axios.get('/users/stats', { headers: { token: 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYxM2UxNDQzYmI1ODUwOTU3OTk4NzE1OCIsImlzQWRtaW4iOnRydWUsImlhdCI6MTYzMTYzMDc4NCwi..

티스토리툴바