개발/React.JS

[React.JS] useEffect

개념 React.JS의 useEffect는 클래스 Component를 사용하지 않아도 함수형 Component에서 LifeCycle에 관여할 수 있도록 하는 Hook 기술 입니다. Component가 Mount, Update, Unmount 시점에서 동작하도록 Callback 함수를 사용합니다. 방법 먼저 react 에서 useEffect 를 import 합니다. import { useEffect } from 'react'; useEffect 함수의 원형 입니다. 첫 번째 파라미터는 Callback 함수, 두 번째 파라미터는 Dependency Array 로 주는 것이 일반적인 형태입니다. useEffect(() => {}, []); 1. Callback 함수와 빈 배열이 주어지면 componentDid..

[React.JS] useRef

개념 Javascript 문법으로 특정 Element에 접근할 때에는 getElementById, getElementByClassName 등으로 접근해서 사용합니다. React.js 에서도 이처럼 특정 상황마다 특정 Element에 접근해서 이벤트를 처리할 수 있습니다. (예를 들어, 회원가입 시 누락된 항목에 대해 경고 팝업을 띄우지 않고 포커스를 주어 곧바로 입력 가능하게 하는 등...) 방법 React에서 제공하는 useRef 를 사용하면 됩니다. 1. 가장 먼저 useRef를 import 해줍니다. import { useRef } from 'react'; 2. useRef 객체를 생성해줍니다. const emailInput = useRef(); 3. Element의 'ref' Attribute에 ..