React7 [React] useFormStatus를 사용한 pending 상태 추적 useFormStatus란?React 18에서 도입된 서버 컴포넌트에서 비동기 폼 처리 상태를 관리하는 데 사용폼 제출 중, 폼 제출이 완료되었을 때 등의 상태를 추적useFormStatus 훅은 자신이 위치한 컴포넌트가 폼의 자식이 되어야 하며, 부모 폼의 상태를 감지할 수 있어야 합니다. Button 컴포넌트에 적용export default function Button({ large = false, //기본값 onClick, type, text, ...rest}: ButtonProps) { const { pending } = useFormStatus(); //useFormStatus를 이용하여 부모 form의 pending상태를 알아냄 //useFormStatus는 form의 자식만 쓸.. 2024. 9. 9. [React] Input 컴포넌트에서 useRef 오류가 날 때 문제 상황 input과 오류 메세지를 컴포넌트로 만들어서 사용하였고 input에 오류 메세지가 뜨면 useRef로 포커스가 되게 하려고 했으나 포커스가 적용되지 않고 오류 메세지가 나오는 현상 input 컴포넌트"use client";interface InputProps { label: string; name: string; kind?: "text"; errors?: string[]; [key: string]: any; //input으로 오는 모든 props를 받게 해놓음}export default function Input({ label, name, errors = [], kind = "text", //kind의 기본값은 text이고 나머지값들은 객체로 받아옴 ...rest //inp.. 2024. 9. 9. [React] scrollTo 스크롤 이벤트 오류 (찔끔찔끔 올라가는 버그) 홈페이지를 만들면서 클릭하면 최상단으로 올라가는 버튼을 만들었습니다. 123const scrollToTop = () => { window.scrollTo({ top: 0, behavior: "smooth" }); };Colored by Color Scriptercs 문제 상황엄청나게 간단한 코드인데 원인 모를 버그가 생깁니다.버튼을 누르면 찔끔(?) 올라갔다가 멈추는 현상이 발생합니다.왜 그런걸까 아무리 생각해봐도 답이 안나오는 상황에 구글링을 열심히 하여 해결방법을 찾았습니다. 12345678910const scrollToTop = () => { const scrollStep = -Math.floor(window.scrollY / 15); const scrollInterval = se.. 2024. 6. 11. [React] 뒤로가기 막는 방법 (feat.모달창) 문제 상황모달을 열고 닫은 뒤 뒤로가기 버튼을 누르면 이전 URL로 넘어 가면서 모달창이 다시 열리는 현상이 발생했습니다. 이 현상을 해결하기 위해 useEffect를 사용하여 뒤로가기를 누를때 동작을 정의해주는 함수를 만들어 주었습니다.홈페이지 전체에서 뒤로가기를 막아야 되기 때문에 App.js에 추가해 주었습니다. 1234567891011function App() { useEffect(() => { const preventGoBack = () => { window.history.go(1); console.log("prevent go back!"); }; window.history.pushState(null, "", window.location.pathname);.. 2024. 6. 11. 이전 1 2 다음
