리액트를 시작하게 되면 필연적으로 Hooks를 알아야한다. Hooks란 무엇이고 어떻게 사용할까?
Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.
우리는 상태관리, 생명주기를 사용하기 때문에 class component를 사용했다. 하지만 class component에는 여러가지 문제점이 존재해 hooks가 탄생했다.
Hooks가 등장하기 전에는 상태 관리나 생명 주기나 등등 여러가지 기능등을 사용하기 위해 필연적으로 class component를 사용했다. 하지만 class 컴포넌트는 여러가지 단점이 존재한다.
이렇게 여러 단점을 가지고 있었지만 우리는 상태 관리, 생명 주기를 위해서 어쩔수 없이 class 를 사용 했지만 Hooks의 등장으로 functional component에서도 class component 에서 사용했던 여러가지 기능들을 사용 할 수 있게 되었다.
대표적으로 사용하는 React Hooks는 세가지 정도가 있다.
컴포넌트가 랜더링 될때마다 작업을 수행함. 생명 주기도 설정가능
function App() {
const [count, setCount] = useState(0);
const onInc = () => {
setCount((prev) => prev + 1); // prev는 이전 값을 의미
};
return (
<div>
<button onClick={onInc}>+ 1</button>
<h1> Count: {count}</h1>
</div>
);
}
상태를 관리하여 동적인 상태로 만들어줌
export default function App() {
useEffect(() => {
alert("render!");
}, []);
return <div></div>;
}
상태를 전역으로 관리 할 수 있게 해줌
import { createContext, useContext } from "react";
export const CountContext = createContext(null); // context 생성
function App() {
return (
<CountContext.Provider value={12}> // context.provider로 감싸주고 값도 지정
<div>
<Child />
</div>
</CountContext.Provider>
);
}
const Child = () => {
const cnt = useContext(CountContext);
return (
<div>
<h1>Count : {cnt}</h1>
</div>
);
};
이외에서 useReducer useCallback useMemo useRef 등 여러가지 가 존재한다.