react

useLayoutEffect

컴포넌트가 unmount 될 때 video의 src 태그를 한 번 비워줄 필요가 있었다. 기존 코드에서 video src 세팅을 ref로 분리하고, useEffect를 통해 처리하고자 하였다. 만약 기존 코드가 아래와 같았다면, const VideoPlayer = ({ videoUrl }: { videoUrl?: string }) => { return ; } 다음과 같이 수정하였다. const VideoPlayer = ({ videoUrl }: { videoUrl?: string }) => { const videoRef = useRef(null); useEffect(() => { if (videoRef.current && videoUrl) { videoRef.current.src = videoUrl; }..

[React] 일정시간동안 이벤트 발생이 없으면 콜백 함수 실행

화면에서 일정시간동안 입력이 없으면 메인화면으로 전환되는 기능이 필요했다. 기능을 구현하기 위해 아래와 같은 커스텀 훅을 만들었다. useEventTimeout 지정한 이벤트의 발생으로부터 일정 시간 이후에 콜백 함수를 실행시킨다. 먼저, 파라미터로 다음과 같은 값을 받았다. callback : 콜백 함수 events : 트리거를 발생시킬 이벤트 이름 리스트 timeout : 콜백 함수의 실행 딜레이 시간 이때 기본값으로 events는 사용자의 입력을 감지하기 위해 click과 keypress 이벤트를 설정했고 timeout은 5분으로 지정하였다. 구현은 Debounce와 동일한 개념으로 개발하였다. [Javascript] Throttle 과 Debounce 참고 [Javascript] Throttle ..

React-Query 정리

React Query는 리액트 애플리케이션에서 global state 없이 서버 데이터 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 만들어 주는 서버 상태 관리 라이브러리다. React Query의 등장 React 는 서버에서 데이터를 가져오거나 업데이트하는 명확한 방법을 제공하지 않는다. 따라서 개발자들은 데이터를 가져오기 위한 처리를 따로 해주어야 했다. 일반적으로 컴포넌트에서 hook을 사용하여 데이터를 가져와 상태를 관리하거나, 전역 상태 관리 라이브러리를 사용하여 store에 비동기 데이터를 저장하고 가져왔다. 이때 store 는 전역 상태를 관리하는 저장소로 theme 나 locale 과 같은 client state 관리에는 적합하지만, 서버에서 가져오는 데이터 server state 관리에는..

[Redux] 간단한 예제로 살펴보는 리덕스의 동작 원리

React는 상태를 기반으로 사용자 인터페이스(UI)를 제어하기 위한 자바스크립트 라이브러리이다. 웹 애플리케이션은 사용자와의 활발한 인터렉션을 처리하고, 실시간 통신을 통해 데이터를 받아오며 이를 기반으로 렌더링을 하는 등 다양한 기능을 가지고 있다. 이때, 상태(state)를 관리하는 것은 필수적으로 요구되는 사항이다. 즉, 상태 관리란 React 앱 구축에 있어 핵심이 되는 부분 중 하나라 할 수 있다. 따라서 상태 관리를 위한 많은 기술이 다양한 라이브러리의 등장으로 이어지게 되었다. 그 중에서도 리덕스(Redux)는 리액트와 가장 오랜 기간을 함께했으며 가장 널리 알려진 상태관리 라이브러리 중 하나이다. 이번 포스팅에서는 리덕스의 동작 원리를 간단한 예제와 함께 살펴볼 것이다. 👉 리덕스의 코어..

[React] ContextAPI & useContext Hook을 통한 Global State 값 관리하기

✨ Context API란? 전역 상태(global state) 값을 공유할 수 있도록 React에서 고안된 방법 주로 로그인한 유저 정보, 테마, 언어 등을 저장한다. Prop Drilling을 개선할 수 있다. Prop Drilling Prop Drilling은 컴포넌트 트리에서 컴포넌트에 직접적으로 필요한 데이터를 props로 전달받는 것이 아니라, 단순히 컴포넌트 트리의 하위 컴포넌트로의 props 전달을 위하여 데이터를 전달하는 과정이다. ✨ Context API 사용법 Context의 사용법은 다음과 같다. React.createContext(defaultValue) Context 객체를 생성한다. createContext 함수를 호출하면 Provider와 Consumer 컴포넌트를 반환한다...