useState, useRef

useState

react 16.8버전부터 새로 추가된 Hook 중 하나로 클래스 형태의 컴포넌트에서 사용하던 Lifecycle 기능을 함수 형태의 컴포넌트에서도 연동할수 있게 해주는 함수이다.

import React, { useState } from "react";
/////////////////////////////////////////
위처럼 hook을 사용하겠다고 선언 해야 사용가능 
/////////////////////////////////////////

const App = () => {

	const [num, setNum] = useState(0);
    // 배열로 구성되며 첫번째 요소는 state 변수, 두번째요소는 state를 업데이트 하는 함수
    // useState(0) 안의 0은 초기값
    
	return(
    	<div>
        </div>
    )
}
export default App;

useRef

자바스크립트의 getElement(s)By(selector) 처럼 특정 DOM을 선택할 수 있는 React Hook 중 하나로 주로 특정 요소의 크기를 가져오거나 포커싱 설정을 할 때 사용한다고 한다.

import React, { useRef } from "react";
/////////////////////////////////////////
위처럼 hook을 사용하겠다고 선언 해야 사용가능 
/////////////////////////////////////////

const App = () => {

	const idx = useRef();
    
    const onClick = () => {
    	idx.current.focus();	
        // .current값 = 선택하고자 하는 DOM을 가리킴
        // .focus = 해당 DOM을 포커싱하는 함수를 호출
    };
	return(
    	<div>
        	<input ref={idx} />
                <button onClick={onClick}>버튼</button>
        </div>
    )
}
export default App;