contextapi
-
[WizSched] Toast Component 개선기Front-End/Project 2025. 2. 22. 09:56
🍀목차글의 목적useToast 커스텀 Hook 만들기개선 1 : Provider 사용개선 2 : useRef 사용최종 완성 글의 목적 Toast 컴포넌트는 사용자에게 일시적으로 표시되는 안내 메시지를 제공하는 컴포넌트이다. 프로젝트에 사용할 Toast 컴포넌트를 만들던 중, 겪었던 문제와 개선 방법을 정리하면 좋을 것 같았다. 같은 문제를 겪고 있는 사람에게 쉽고 유용한 정보가 되었으면 한다. useToast 커스텀 Hook 만들기 아래는 Toast 컴포넌트가 해야 할 동작을 생각하며 간단히 작성해 본 코드이다.open toast 버튼을 클릭하면 show라는 state를 true로 바꿔 🍞가 화면에 표시되었다가 3초 뒤에 사라진다. import { useState, useEffect } fr..
-
[WizSched] Supabase onAuthStateChange 활용하기Front-End/Project 2024. 2. 2. 16:22
🍀 목차문제onAuthStateChange?정리Session구현 문제 OAuth를 통해 유저로그인을 하는 코드는 아래와 같았다. const { data, error } = await supabase.auth.signInWithOAuth({ provider: 'github'}) 그런데 이 signInWithOAuth 메서드는 redirect를 유발하고, 해당 코드가 성공하는 순간 작성된 redirect URL로 이동한다. 이 사실을 알지 못하고 해당 코드 아래에 data가 있으면 유저 상태를 변경하는 로직을 작성했고, 그 유저 상태에는 NULL만 들어가게 되었다. 공식 문서를 부분적으로 읽다 보니 제대로 이해하지 못하고 작성하여 발생한 문제 같다. Supabase의 auth는 onAuthState..
-
[React] 상태 관리 (+라이브러리)Front-End/React 2023. 12. 1. 18:54
🍀 목차전역 상태상태 관리의 필요성대표적 라이브러리와 콘셉트계속되는 연구들 전역 상태 상태는 변화하는 동적인 데이터이다. 웹 페이지에서 데이터는 사용자와 상호작용을 통해 변경되기도 하고, 그렇게 변한 데이터가 UI에 나타나기도 한다. React에서는 Component(컴포넌트)들이 State(상태)라는 객체를 가지며, 변경되면 컴포넌트는 리렌더링되어 반영하게 된다. 이러한 상태들은 보통 컴포넌트 안에서 관리되나, 단일 컴포넌트를 넘어 전역적으로 프로젝트에서 사용되는 상태가 될 수도 있다. 보통 전역이란 단어가 붙으면 프로그램 어디서나 접근할 수 있다를 의미하는데, 전역 상태도 같다. 또한, 상태기에 컴포넌트가 변경을 감지해 리렌더링 해야 한다. 전역 상태의 예시에는 무엇이 있을까?다크모드나 로그인..
