useState, useRef

useState

react 16.8バージョンで新しく追加されたHookの1つで、クラス形式要素で使用される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

JavaScriptのgetElementBy(セレクタ)のように特定のDOMのReact Hookの1つを選択し、主に特定の要素のサイズを取得したりフォーカスを設定したりすることができます.

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;