728x90 react5 React 공통 컴포넌트 제작 (input, button) 공통 컴포넌트 제작의 필요성 하나의 사이트를 제작할때 비슷한 input이나 button을 사용해야 하는 상황이 자주 있는데, 공통된 컴포넌트를 만들어 놓으면 코드 중복을 줄이면서 상황에 맞춰 적절하게 사용할 수 있게 된다. 컴포넌트 제작 Input import React from "react"; // element 속성을 가져오기 위해 import import styled from "styled-components"; // CSS 적용 // 컴포넌트의 props 타입을 InputElement의 속성과 내가 설정하고자 하는 타입을 포함한다. type Props = React.HTMLAttributes & InputProps; interface InputProps { type?: string | undefi.. 2023. 4. 13. React Form event type (feat. 타입 단언 as) Form Event type 우리는 로그인이나 포스팅 등의 화면을 만들어줄 때 클라이언트가 입력하는 데이터를 입력받는 방법 중 하나로 onChange 등의 FormEvent를 이용해 원하는 값을 추출할 수 있다. 이때 이벤트 타입은 아래와 같이 사용될 수 있다. import { FormEvent } from "react"; export type FormEvents = FormEvent; export type InputEvent = FormEvent; export type LabelEvent = FormEvent; react에서 FormEvent 타입을 받아오고, 해당되는 element를 제네릭 타입으로 넣어주면 된다. onChangeHandler const [formData, setFormData] = .. 2023. 4. 13. React/Javascript 부드러운 스크롤 이동 적용 부드러운 스크롤 적용 방법 behavior: "smooth" 속성을 scroll 이벤트와 scroll 메서드와 같이 사용하며 부드러운 스크롤 이동을 적용해볼 수 있다. 본 포스팅은 Nextjs13 환경에서 작성되었다. scroll 메서드 scroll() , scrollTo() scroll(x,y) || scroll(options), scrollTo(x,y) || scrollTo(options) 와 같이 사용할 수 있다. 사실상 두 메서드는 동일하게 작동한다. xy 좌표를 통해서도 사용 가능하며 options를 적용한다면 아래와 같이 사용할 수 있다. window.scroll({ top: 0, left: 0, behavior: "smooth", // smooth: 부드럽게 전환 , auto: 즉시 이동 }.. 2023. 3. 25. React 함수형 컴포넌트와 Class형 컴포넌트 생명주기 React state와 LifeCycle 함수형 컴포넌트와 class형 컴포넌트의 LifeCycle이 어떻게 되는지 간단하게 비교해 보는 글이다. 클래스형 컴포넌트와 생명주기 메서드 1. Mount(컴포넌트가 처음 실행될 때) - state, context, defalutProps 저장 - componentWillMount - 안전하지 않은 접근 - render - componentDidMount - DOM 접근 가능 2. Props Update(프롭스가 업데이트될때) - componentWillReceiveProps - 사용 종료 - shouldComponentUpdate - componentWillUpdate - 사용 종료 - render - componentDidUpdate - DOM 접근 가능 3.. 2023. 3. 23. 이전 1 2 다음 728x90
