728x90 개발일지/React24 z-index가 적용되지 않을때 지금까지는 z-index를 사용하면서 별다른 문제가 없었지만, 최근에 사이드 메뉴 바 작업을 진행하면서 이상한 현상이 발견됐다. z-index 999가 무적인 줄 알았던 나는 position도 설정돼있는 요소인데 이게 대체 머선일인가 싶어 MDN에 쪼르르 달려갔다. https://developer.mozilla.org/ko/docs/Web/CSS/z-index z-index - CSS: Cascading Style Sheets | MDN CSS z-index 속성은 위치 지정 요소와, 그 자손 또는 하위 플렉스 아이템의 Z축 순서를 지정합니다. 더 큰 z-index 값을 가진 요소가 작은 값의 요소 위를 덮습니다. developer.mozilla.org 마지막 줄의 "자손의 z-index를 자기 외의 바.. 2023. 1. 31. React에서 formData 코드 간소화하기 한 폼의 여러 input의 변경을 관리하기 위해 onChangeHandler 같은 함수를 만들어 사용할 수 있다. // form.tsx onSubmitHandler(e, dispatch)}> onChangeHandler(e)} /> onChangeHandler(e)} required /> onChangeHandler(e)} required > {isEdit ? "수정하기" : "등록"} // useForm.tsx const [formData, setFormData] = useState({ profile_url: "", author: "", content: "", createdAt: todayDate(), }); const onChangeHandler = (e: InputEvent) => { let typ.. 2023. 1. 18. React useNavigate로 props 넘기기 useNavigate로 다른 페이지의 화면으로 이동할 때, props처럼 값을 넘기는 방법을 알아봤다. // 보내는컴포넌트.jsx import { useNavigate } from "react-router-dom"; const 어떤함수=()=>{ const navigate = useNavigate() let someDatas = { name:"hihi" value:"here" } return navigate(`/다른페이지주소`,{ state: someDatas });}> 다른페이지로 갑니당 } // 받는 컴포넌트.jsx import { useLocation } from "react-router-dom"; const 어떤함수=()=>{ const location = useLocation(); console.. 2022. 10. 5. React submit 이벤트 방지하기 기본적으로 가장 접하기 쉬운 submit 방지는 preventDefault()이다. const Header = ()=>{ const onSubmit = (e) =>{ e.preventDefault(); } return( onSubmit(e)}>입력 )} 하지만 가끔 똑같은 코드를 적어도 submit 방지가 되지 않는 경우가 있다. (직접 동일한 상황을 겪었을 때를 기준으로 생각해보면, 다른 컴포넌트와 겹치는 등의 경우로 예상된다.) 그런 경우에는 아래와 같이 작성해도 정상적으로 submit 이벤트가 중지된다. const Header = ()=>{ const onSubmit = (e) =>{ e.preventDefault(); } return( onSubmit(e)}>입력 )} 위와 같이 작성하면 같은 폼.. 2022. 10. 2. 이전 1 2 3 4 5 6 다음 728x90
