시작하며 React 프로젝트를 하다 보면 특정 동작을 오직 한 번만 실행하거나, 중복 호출을 막아야 하는 상황이 자주 발생합니다. 특히, API 호출이 불필요하게 여러 번 호출될 경우에는 성능에 영향을 줄 뿐만 아니라 더 나아가 데이터베이스 무결성에 영향을 줄 가능성이 있습니다. 오늘은 useEffect를 활용하여 앞선 문제를 간단하고 효율적으로 해결하는 방법을 소개하고자 합니다. 왜 useEffect를 사용할까? React에서 상태 관리를 위한 useState와 달리 useRef는 값이 변경되어도 렌더링에 영향을 주지 않으며 값이 동기적으로 즉시 변경된다는 특징을 가지고 있습니다. useRef의 주요 특징1. 렌더링과 독립적ref 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.불필요한 렌더링을 방지..
React
문제 상황 스크린샷처럼 react hooks이 적용된 컴포넌트에서 ‘Warning: React has detected a change in the order of Hook ~’에러가 발생하는 것을 볼 수 있습니다. 문제 확인 에러 문구 그대로 hooks의 순서가 변경됨에 따른 경고입니다. 위 사진에서는 useContext -> undefined 순서로 호출되던 hooks가 useContext -> useState 순서로 바뀐 것을 볼 수 있습니다. hooks의 순서가 변경되면 안되는 이유? 리액트에서 rooks의 주요 제약은 크게 아래 2가지 입니다. hooks는 함수형 컴포넌트 내부, 최상단에서 호출되어야 한다(조건문, 반복문, 함수 내부 X).hooks는 컴포넌트의 re-render마다 동일한 순서로..
웹 애플리케이션을 구현하다 보면 사용자의 권한 등에 따라 접근 제한을 두어야 하는 페이지가 있습니다. 우리는 여러 서비스를 비회원으로 사용하면서 로그인이 필요한 기능 페이지에 진입 시에는 로그인, 회원가입 페이지로 이동한 경험을 모두 가지고 있을 것입니다. 그렇다면 이러한 페이지 별 접근 제한을 React에서는 어떻게 구현할 수 있을까요? 오늘은 제가 이전에 useEffect hook을 이용하여 페이지 별 접근 제한을 구현한 방법 그리고 이를 개선한 1가지 방법을 더 알아보려고 합니다. 1. useEffect를 사용한 페이지 접근 제한 구현 // login 상태가 아닌 경우에 Keyword 페이지로 접근하면 Login으로 redirect useEffect(() => { if (!isLoggined) { ..
Invalid Hook Warning은 react hook을 이용하다 보면 자주 발생하는 문제로 React 공식 문제에서도 해당 문제에 대한 해결법을 정리해두었습니다. 필요하신 분은 아래 공식 사이트를 이용하셔도 됩니다. React 공식 문서 - Invalid Hook Warning https://ko.legacy.reactjs.org/warnings/invalid-hook-call-warning.html Invalid Hook Call Warning – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 1. Invalid Hook Call Warning은 언제 발생할까? Hooks can only be called..
1. Recoil이란? Recoil은 Facebook에서 제작한 React를 위한 상태 관리 라이브러리입니다. Reocil 공식 홈페이지: https://recoiljs.org/ko/ Recoil A state management library for React. recoiljs.org 프론트엔드에서 상태 관리를 매우 중요한 요소입니다. 상태 관리를 통하여 서비스나 프로그램의 동작을 예측 가능하도록 만들고, 버그를 줄이며, 코드를 더욱 효율적으로 작성할 수 있도록 도와줍니다. 2. 많은 상태 관리 라이브러리 중에 왜 Recoil을 사용할까? 최근 많은 React 프로젝트에서 Reocil을 통하여 상태 관리를 진행하는 것을 심심치 않게 볼 수 있는데, 제가 생각하고 적용해보며 느낀 선정 이유는 아래와 같습..
문제 상황(Problem) Vite + React 프로젝트를 nginx를 이용하여 배포를 진행하던 중에 아래와 같은 문제가 발생하였다. 해결 방법(Solution) 아마 나처럼 Nginx를 처음 사용하는 사람들이 같은 문제를 많이 겪을 것이라고 생각한다. ipv6의 사용을 하지 않는 서버의 경우에 nginx 기본 설치 파일 중 /etc/nginx/sites-enabled/default (deafault 파일 설정 파일) 내부에 있는 ipv6 관련 설정 부분과 충돌하여 문제가 발생하게 된다. 문제 해결 방법을 간단하게 적으면 아래와 같다. 1. default 사이트 설정 파일 "/etc/nginx/sites-enabled/default"를 파일 편집기를 통하여 연다. vi /etc/nginx/sites-e..
React + Vite에서 Pretendard 폰트를 전역적으로 적용하기 위하여 코드를 작성하였는데 해당 코드에 문제점이 있다는 것을 조금 늦게 발견하였다. 화면 상으로는 폰트가 정상적으로 적용된 것처럼 보이지만, 콘솔 로그를 살펴보면 'Failed to load resource' 에러가 발생하고 있다. 즉, 적용하고자 하는 폰트 파일들을 불러오는 단계부터 문제가 되고 있다는 뜻. 가장 먼저 해당 파일의 경로가 올바른지, 경로 작성에서 오탈자가 있지는 않은지 확인하였지만 별 다른 문제점은 없었다. 아래는 문제가 되는 코드의 일부이다. 문제 코드 const GlobalStyles = createGlobalStyle` @font-face { font-family: Pretendard; src: url('./..
