React Hooks
리액트(React)는 SPA 형식으로 작동되기 때문에 렌더링을 위해서는 state의 사용이 필요하다.
별도의 라이브러리 없이 기본 리액트를 동작하기 위해서는 useState() 훅(hook)의 사용이 필수적이다.
훅은 리액트에서 기능을 의미하는 것으로 React Conf 2018에서 발표되어 React 16.8 버전부터 처음으로 공식적으로 쓰인 개념이다.
- State Hook
import React, { useState } from 'react';
function Example() {
// count라는 state이는 생성하여 useState로 선언
const [count, setCount] = useState(0);
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}기본적인 구조는 위와 같다.
state와 modifier 함수로 구성된 배열을 useState로 선언하고 사용하는데 뒤에 작성되는 modifier 함수명은 보통 state명에 앞에 set 붙여서 카멜케이스로 선언하여 사용한다.
setCount() 괄호 안에 함수를 구성하여 count의 state를 변경하고 상태의 변경이 일어날 때 컴포넌트는 리렌더링하게 된다.
- Effect Hook
import React, { useState, useEffect } from 'react';
function Example() {
const [count, setCount] = useState(0);
useEffect(() => {
document.title = `You clicked ${count} times`;
});
return (
<div>
<p>You clicked {count} times</p>
<button onClick={() => setCount(count + 1)}>
Click me
</button>
</div>
);
}useEffect는 리렌더링이 일어날 때마다 실행되는 hook이다. useEffect(() => {}) 콜백함수를 사용할 수 있으며 함수 다음에 useEffect(() => {}, [count]) 의존성 배열을 옵션으로 작성하여 사용할 수 있다. 의존성 배열이 없을 때는 어떤 컴포넌트든지 리렌더링이 일어날 때마다 훅이 실행되지만 의존성 배열을 추가하게 되면 의존성 배열에 해당하는 state가 변경될 때만 함수가 실행된다.
- useRef()
import { useState, useRef } from "react";
const Form = () => {
const [state, setState] = useState({ title: "", body: "" });
const titleInput = useRef();
const addTodoHandler = (event) => {
event.preventDefault();
};
if (state.title && state.body !== "") {
dispatch(addTodo(newTodo));
setState({ title: "", body: "" });
}
titleInput.current.focus();
};
return (
<label className="form-label">{"제목"}</label>
<input
ref={titleInput}
value={state.title}
/>
<label className="form-label">{"내용"}</label>
<input
value={state.body}
/>
)리액트는 가상 DOM을 만들어서 state 상태에 따라 컴포넌트를 변경하고 리렌더링해서 데이터를 뷰페이지에 반영하기 때문에 바닐라 JS처럼 DOM직접 선택하여 event를 등록하지 않아도 된다. 하지만 특정한 요소의 좌표로 스크롤을 이동시킨다거나 인풋창의 포커스를 옮기는 등의 경우에는 요소를 특정할 수 있도록 ref참조가 필요하다. 위의 경우에는 인풋창에 값을 입력해서 데이터를 추가한 후 ref를 참조하고있는 인풋창으로 커서가 옮겨간다.
