FE/React

"React Hook "useState" is called conditionally. React Hooks must be called in the exact same order in every component render." 최근에 리액트로 팀 프로젝트를 하면서 Invalid hook call 에러나 위와 같은 Eslint error를 종종 봤는데요.매번 아차차 하고 넘어갔던 에러이지만, 왜 훅이 렌더링 될 때마다 같은 순서를 유지해야 하는지 궁금해서 찾아보다가 좋은 참고 자료를 발견하고 이 글을 쓰게 되었습니다. 리액트 공식문서에는 훅의 규칙을 명시하고 있는데, 일단 훅이란 뭔지 간단히 설명해 볼게요. Hook 이란?함수 컴포넌트에서 상태와 생명주기 기능을 "연동"(hook)할 수 있게 해주는 특별한..

❕❕리액트를 공부 중인 초보자의 코드입니다. 잘못되었거나 개선할 사항이 있다면 댓글 부탁드립니다. 진행 중인 프로젝트에서 댓글 CRUD를 구현하였다. 그 중 댓글을 수정하는 부분이 조금 까다로웠는데, 내가 구현하고자 했던 수정기능은 아래와 같다. 1. 수정버튼을 클릭하면 댓글 수정 박스가 나타난다. 2. 다시 수정버튼을 클릭하면 수정 박스가 사라지고 댓글 수정이 취소된다. 처음에는 단순히 댓글의 수정상태를 설정해서 댓글수정 박스가 보이도록 했는데, 그러면 모든 댓글의 수정상태가 통일되어서 수정 중인 댓글의 수정버튼이 아닌, 다른 댓글의 수정버튼을 눌러도 수정이 취소되는 오류가 발생했다. (왜냐하면, 서버에서 전체 댓글 데이터를 배열로 받아 map()으로 요소를 한 개씩 받아서 동일한 작업을 수행하도록 구..

로그인을 성공하면 서버에서 accesstoken과 refreshtoken을 응답 헤더로 넘겨준다.프론트에서는 이 토큰들을 recoilPersist를 통해 sessionStorage에 저장해 사용자가 다른 페이지로 이동할때에도 토큰들을 사용하여 인증된 사용자 요청을 보낼 수 있도록 하였다.(recoilPersist를 이용하지 않고 저장하면, 페이지를 새로고침하거나 다른 페이지로 이동할때 저장한 토큰들이 다 날아가버린다.) 1.  토큰 상태 생성State폴더 안에 Atom.ts파일을 만들어서 관리하였다.persistAtom에 저장된 토큰들을 모두 sessionStorage에 저장한다.localStorage와 sessionStorage의 차이점은 페이지를 닫을 때 데이터들이 사라지는지의 여부이다. 진행 중인 ..

현재 진행중인 프로젝트에서 간단한 회원가입 양식을 Axios를 통해 서버로 POST요청을 보내보았다.프로젝트는 Styled-component와 Vite를 사용해 TypeScipt로 구현하고 있다. POST요청시에 발생했던 CORS에러를 클라이언트에서 처리하는 방식도 간단히 언급해보려고 한다.   먼저 기본적인 회원가입 데이터를 입력하는 양식을 아래 코드와 같이 작성하였다.// 회원가입 양식return( 이름 아이디 비밀번호 ..

useCallback보통 React 컴포넌트의 렌더링이 일어날 때, 함수형 컴포넌트 내부의 함수들은 매 렌더링 시 새롭게 생성된다. 이는 불필요한 자식 컴포넌트들의 재랜더링으로 이어질 수 있는데 useCallback은 이러한 문제를 해결하기 위해 사용된다. usecallback은 함수를 캐싱해서 재사용한다. 따라서 컴포넌트가 재실행 될때, 함수 내의 변수들이 초기화(새롭게 생성)되지 않는다.usecallback을 사용하면 함수 메모리의 주소가 객체에 할당된다. 컴포넌트가 렌더링될때 새로운 주소가 할당되는 것이 아니라 이전에 저장했던 주소가 계속 사용되는 것이다. useCallback(() => { }, []); : 기본적으로 콜백함수와 의존성배열을 인자로 받는다. const [category, setCa..

진행중인 프로젝트에 react router v6.4를 사용하면서 createBrowserRouter와 에 대해 정리해보았다. createBrowserRouter()와 간단히 설명하면, createBrowserRouter에서 경로를 모두 지정하여 RouterProvider의 router에 전달하는 방식이다. import { createBrowserRouter, RouterProvider,} from "react-router-dom";const router = createBrowserRouter([ { path: "/", element: , loader: rootLoader, children: [ { path: "team", element: , ..