시작하며 React 프로젝트를 하다 보면 특정 동작을 오직 한 번만 실행하거나, 중복 호출을 막아야 하는 상황이 자주 발생합니다. 특히, API 호출이 불필요하게 여러 번 호출될 경우에는 성능에 영향을 줄 뿐만 아니라 더 나아가 데이터베이스 무결성에 영향을 줄 가능성이 있습니다. 오늘은 useEffect를 활용하여 앞선 문제를 간단하고 효율적으로 해결하는 방법을 소개하고자 합니다. 왜 useEffect를 사용할까? React에서 상태 관리를 위한 useState와 달리 useRef는 값이 변경되어도 렌더링에 영향을 주지 않으며 값이 동기적으로 즉시 변경된다는 특징을 가지고 있습니다. useRef의 주요 특징1. 렌더링과 독립적ref 값이 변경되어도 컴포넌트가 리렌더링되지 않습니다.불필요한 렌더링을 방지..
useEffect
웹 애플리케이션을 구현하다 보면 사용자의 권한 등에 따라 접근 제한을 두어야 하는 페이지가 있습니다. 우리는 여러 서비스를 비회원으로 사용하면서 로그인이 필요한 기능 페이지에 진입 시에는 로그인, 회원가입 페이지로 이동한 경험을 모두 가지고 있을 것입니다. 그렇다면 이러한 페이지 별 접근 제한을 React에서는 어떻게 구현할 수 있을까요? 오늘은 제가 이전에 useEffect hook을 이용하여 페이지 별 접근 제한을 구현한 방법 그리고 이를 개선한 1가지 방법을 더 알아보려고 합니다. 1. useEffect를 사용한 페이지 접근 제한 구현 // login 상태가 아닌 경우에 Keyword 페이지로 접근하면 Login으로 redirect useEffect(() => { if (!isLoggined) { ..
