목록Front-end/React (3)
NULL
navigation("/search", { state: { value: e.target.value, movieData: props.movieData, tvData: props.tvData, }, }); input검색창에서 값을 입력받으면 검색결과 컴포넌트로 props을 보내고 싶었다. 알아보니 해당 url파라미터와 state을 이용해서 원하는 컴포넌트 링크로 props을 보낼 수 있었다.
NetFlix클론을 하다가 Navbar에 일정 스크롤을 내리면 불투명도를 주고 싶었다. 수 많은 방법이 있지만 그 중에서 Framer-Motion을 통해서 스크롤 애니메이션으로 처리할 수 있는 방법을 선택하였다. const { scrollY } = useScroll(); const bg = useTransform( scrollY, [0, 80], ['rgba(0,0,0,1)', 'rgba(0,0,0,0.5)'] ); scrollY : 사용자의 스크롤 동작에 따라 동적으로 업데이트되는 스크롤 위치를 나타낸다. [0, 80] : 입력 범위로, 여기서 0은 스크롤의 시작을 나타내고, 80은 스크롤 범위의 끝을 나타낸다. 이 범위는 스크롤 위치에 따라 배경 색상의 전환을 결정하는데 사용된다. ['rgba(0,0..
react-hook-form을 다루면서 마주했던 오류를 기록하는 회고록이다. CSS는 styled-components를 사용했다. Input컴포넌트에서 onChange이벤트를 등록하고 싶었다. 그래서 onChange이벤트를 넣어줬는데 동작하지않는 상황에 직면하였다. 구글링으로 찾아보니 react-hook-form만의 사용방법이 따로 존재하였다. 해결방법은 간단하다. onChangeHandler(e), })} aria-invalid={errors.id ? "true" : "false"} placeholder="이메일을 입력해주세요." /> register함수 옵션안에 이벤트를 등록해주었더니 해결되었다. 참고링크 : https://velog.io/@rlorxl/react-hook-form-%EA%B4%80%..