React-Hooks 공부 일기장 (2)
My 12th Post
02. React-Hooks 코딩 공부 일기장
by React Hooks Coding with Normad Corder
오늘은 useRef( ) 의 사용법에 대해서 정리하려고 합니다.
먼저 useRef( )는 Function형 프로그래밍에서 아주아주 간편하면서도 유용한 함수입니다.
HTML의 요소를 바꿀 때 우리는 흔히 document.getElementById( )을 쓰게 됩니다.
이것을 React-Hooks 방식으로 작성할 때 사용하는 함수가 useRef( )라고 할 수 있습니다.
useRef( )의 기본적인 사용법입니다.
const function1 = () => {
const element = useRef();
};
const App = () => {
const register = function1();
return (
<div className="App">
<h1 ref={register}>Hi There !</h1>
</div>
);
};
이런식으로 간단하게 HTML요소, 정확히는 JSX요소를 함수에서 가져와서 사용할 수 있습니다.
JSX요소에 ref속성값을 이용하여 여기에 우리가 가져와서 사용할 함수를 가르키는 값을 주고,
가져와서 사용하는 함수에는 element를 선언하고 useRef( )로 연결해주면 해당 JSX요소를 가져와서 사용할 수 있습니다.
오늘은 React-Hooks에서 사용하면 편리한 Function를 포스팅 하였습니다.
이것저것 공부를 하다보니 꽤 긴시간 포스팅을 못했네요 ㅎ
다음에는 useEffect( )사용법으로 돌아오도록 하겠습니다 ! ! !
안녕 ~ ~ !
Good Bye ~