241027 / useNavigate() replace: true 옵션, window.confirm() 메서드, 리액트 쿼리 useMutation
Weather Claus 프로젝트 | TIL
오늘 할 일
디코 확인 후 PR - merge 진행하기- UI 다듬기
프론트 팀원분이 마이페이지 만드신 코드를 보면서 감탄 & 경악 중...
새로 배운 것들은 적어두도록 하겠음
1. useNavigate() replace: true 옵션
navigate('/', {replace: true})- 페이지 이동 기록이 남지 않아 [뒤로가기]를 누르면
히스토리에 남아있는 이전페이지로 돌아감
이게 머선 소리인가 싶죠? 저도 그렇습니다
예시를 보시죠
예시 상황
사용자가 페이지 A에서 시작합니다.
페이지 B로 이동합니다.
페이지 C로 이동하면서 replace: true 옵션을 사용하여 이동합니다.이렇게 하면 다음과 같은 상황이 발생합니다:
replace: true 옵션 때문에 페이지 C는 페이지 B를 히스토리에서 대체합니다.
즉, 페이지 B 기록이 사라지게 됩니다.히스토리 상태 변화
처음에는: 페이지 A → 페이지 B
replace: true로 페이지 C로 이동한 후: 페이지 A → 페이지 C
(페이지 B 기록이 사라짐)이제 뒤로가기를 누르면?
페이지 C에서 뒤로가기를 누르면 페이지 A로 돌아갑니다.
페이지 B는 히스토리에서 사라졌기 때문에 뒤로가기를 눌러도 페이지 B로 돌아갈 수 없습니다.
알아들은 거 같지만 복잡한 기분을 떨칠 수가 없네
2. window.confirm() 메서드
: 확인과 취소 두 버튼을 가지며 메시지를 지정할 수 있는 모달 대화 상자를 띄움
window.confirm(message)ㄴ message : 경고 대화 상자에 표시할 텍스트 문자열
Q. 떠나고 싶니
ㄴ 예
출처 ) https://developer.mozilla.org/ko/docs/Web/API/Window/confirm
3. 리액트 쿼리 useMutation
: 리액트 쿼리에서 서버에 데이터를 보내거나 수정할 때 사용하는 기능
공식 사이트) https://tanstack.com/query/latest/docs/framework/react/reference/useMutation
?? 질문
그냥 api함수 쓰면 되는 거 아닌감?
useMutation을 사용하는 이유는 API 함수를 직접 호출하는 것보다 비동기 요청에 대한 상태 관리를 더 쉽게 해주기 때문
useMutation은 요청의 로딩, 성공, 실패 상태를 자동으로 관리하고, 요청이 성공하거나 실패할 때 실행할 콜백을 설정할 수 있어 코드가 더 간결해짐
useMutation의 주요 장점
- 상태 관리가 쉬움
isLoading, isSuccess, isError 같은 상태값을 바로 사용할 수 있어, 별도의 상태 변수나 로딩 스피너 등을 쉽게 관리할 수 있습니다.- 자동으로 데이터 캐싱
React Query는 데이터 캐싱을 지원해, 성공적으로 데이터가 갱신되면 자동으로 화면을 다시 렌더링해줍니다. 특히 onSuccess 옵션을 활용하면 캐시 데이터를 업데이트할 수 있어 수동으로 화면을 갱신할 필요가 줄어듭니다.- 에러 처리
onError 옵션을 활용하여 에러 발생 시 실행할 작업을 쉽게 추가할 수 있습니다.
비교)
일반 api 함수 사용
function MyComponent() {
const [isLoading, setIsLoading] = useState(false);
const [isError, setIsError] = useState(false);
const handleClick = async () => {
setIsLoading(true);
try {
const response = await fetch('/api/data', { method: 'POST' });
if (!response.ok) throw new Error();
// 성공 처리
} catch (error) {
setIsError(true);
} finally {
setIsLoading(false);
}
};
return <button onClick={handleClick}>데이터 전송</button>;
}useMutation 사용
import { useMutation } from 'react-query';
function MyComponent() {
const mutation = useMutation(() => fetch('/api/data', { method: 'POST' }));
return (
<button onClick={() => mutation.mutate()}>데이터 전송</button>
);
}끝임없이 UI 작업 중인데 어렵다.
코딩도 어렵고 UI도 어렵고
역시나 세상에 쉬운 일이란 없다
UI 참고 자료 찾아보고 우리 사이트와 어울리는 디자인 수집하고
생각하고 구성하고 ............ 머리가 아주 터지겠다
아니다 할 수 있다 아자아자
무언가 계속 바뀌고는 있지만 성에 안 찬다
더더 아름다워야해 더 만족스럽게 더더 -
스스로를 괴롭히는 공신 1등
