Next.js3 Next.js + TypeScript ) 스크롤 내릴 시에 특정 컴포넌트 숨기기 스크롤시 상단 메뉴바 숨기기 작동화면 Code NavBar.tsx import { useScrollDirection } from "./useScrollDirection"; import styled from "styled-components"; const Header = styled.div` position: sticky; height: 3rem; transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 500ms; `; const HeaderDown = styled.div` top: -3rem; `; const NavBar = () => { const scrollDirecti.. 2022. 7. 15. Next.js ) Input 입력값 태그로 변환하기 (TypeScript) 태그 등록 Input 만들기 작동화면 Code export default function TagInput() { const [input, setInput] = useState(""); const [tags, setTags] = useState([]); const [isKeyReleased, setIsKeyReleased] = useState(false); // input 입력값 'input' state 에 등록 const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; // 태그 해제하기 const deleteTag = (index: number) => { setTags((prevSt.. 2022. 7. 15. Next.js + TypeScript ) event 의 Type은 어떻게 지정해야할까? Next.js (React) + TypeScript : Event Type 지정하기 Input Event Input 태그에는 onChange, onKeyUp, onKeyDown 등의 이벤트가 있습니다. 이 이벤트를 통해 함수를 실행할 때에는 onChange const onChange = (e: React.ChangeEvent) => { const { value } = e.target; setInput(value); }; onKeyDown, onKeyUp const onKeyDown = (e: React.KeyboardEvent) => { // ... } const onKeyUp = (e: React.KeyboardEvent) => { // ... } 위와 같이 이벤트의 타입을 지정해주면 됩니다. Sele.. 2022. 7. 14. 이전 1 다음 반응형
