React
-
[React] React에서 input 이벤트 사용하기 (onChange, onInput, onBlur)프론트엔드 2022. 2. 10. 17:36
자바스크립트의 onChange, onInput 이벤트는 onChange : input에서 포커스가 벗어났을 때, input에 입력된 값이 변경되었다면 이벤트 발생 onInput : input에 입력된 값이 변경될 때마다 이벤트 발생 이렇게 이벤트 발생 조건에 차이가 있다. 그런데 React에서는 onChange, onInput이 동일하게, input 값이 변경될 때마다 (포커스 아웃이 없어도) 이벤트가 발생한다. 그래서 리액트에서는 onChange와 onInput이 사실상 동일한 이벤트로 취급되고, 이 중에서는 onChange가 더 자주 사용되는 것 같다. 그렇다면 React에서 자바스크립트의 onChange 이벤트처럼 input에서 포커스가 벗어났을 때 값의 변경이 있는 경우 이벤트를 감지하려면 어떻게..
-
VSCode React styled-components 스니펫프론트엔드 2021. 12. 29. 14:26
스니펫은 "코드 조각"이라는 뜻으로, 자주 사용되는 코드 형식을 미리 만들어두고 간편하게 불러와 사용할 수 있다. 지금 진행 중인 리액트 프로젝트에서는 각 컴포넌트 별로 .jsx 파일을 생성하고 동일한 이름으로 .styles.jsx 파일을 생성한 다음 .styles.jsx에 스타일드 컴포넌트를 import해 스타일을 정의하는 식으로 구조를 작성하고 있다. /Testimonial Testimonial.jsx Testimonial.styles.jsx 내가 사용하는 기본적인 .styles.jsx 파일 형식은 다음과 같다. Testimonial.styles.jsx import styled from "styled-components"; const TestimonialStyled = styled.div``; exp..