React 기본 Hooks

useState

useState는 컴포넌트의 상태를 관리하기 위한 도구를 제공해준다.
let [state, setState] = useState('초기값');
배열의 첫번째 state는 현재 상태 값을 담고있고, 두번째 setState는 state를 변경하기 위해 사용하는 함수이다. state의 값을 수정하기 위해서는 반드시 setState를 통해서 값을 변경해줘야 한다.

useEffect

useEffect는 리액트 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 수 있도록 한다.
리액트의 생명주기는 다음과 같다
1. 생성(Mount)
2. 업데이트(update)
3. 제거(Unmount)

useEffect(() => {
	console.log('useEffect 실행');
}, []);

다음과 같은 형태에서, 마지막 배열이 비어있으면, 처음 Mount 되었을때만 실행되고,
변수가 담겨있으면, 처음 Mount될 때와, 해당 값이 update될때마다 실행되며, 배열이 없으면 리렌더링 될때마다 실행된다.

useContext

리액트로 개발을 하다 보면, 특정 함수나 값을 전달하기 위해 여러개의 컴포넌트를 거쳐서 전달해야하는 경우가 생길수도 있는데, useContext는 이러한 변수나 함수들을 전역적으로 사용할 수 있게 해준다. 이러한 상태관리를 위해 Redux와 같은 상태관리 툴을 사용하는 방법또한 있다.

React 추가 Hooks

useRef

자바스크립트에서 특정 DOM을 선택할 때 DOM Selector를 사용하는 것처럼, react에서는 useRef를 사용한다. 이러한 useRef를 통해 DOM요소에 접근하면 불필요한 재랜더링을 하지 않아도 되는 장점이 있다.

const 변수 = useRef(초기값)
<input ref= {변수명}/>

useMemo

useMemo는 컴포넌트의 props가 바뀌지 않았을 때, 불필요하게 리랜더링을 하지 않게해주어 사이트 성능을 높이기 위해 사용한다. 즉, 동일한 값을 반복해서 계산하게 하면, 이전에 계산한 값을 메모리에 저장함으로써 불필요한 반복수행의 회수를 줄이고, 실행속도를 빠르게 해준다.

useTransition과 useDeferredValue

useTransition과 useDeferredValue은 지나치게 무거운 계산을 하는 로직이 실행되면, 다음 작업을 처리하지 못하게 되는 현상을 방지하기 위해 사용한다. 우선순위를 정해, 지나치게 무거운 계산을 하는 로직의 우선순위를 뒤로 미뤄 사이트가 비교적 상호작용을 잘 할수 있게해준다.