react 2 (훅, 클래스형 컴포넌트와 함수형 컴포넌트)

주의: hooks != 함수형 컴포넌트
헷갈리지 말자.

리액트 훅은 함수형 컴포넌트에 state와 ref를 사용할 수 있도록 추가한 기능이다.
훅의 이름은 'use어쩌고'와 같은 형식이다. useState, useEffect, useRef ...

• useRef()는 DOM에 접근하는 훅. (focus 같은 거 주고 싶을 때나..)

훅을 사용하면 클래스형 컴포넌트 보다 코드의 양이 줄어든다.

함수형 컴포넌트도 state 값이 변할 때마다 렌더링이 된다. 함수형 컴포넌트 자체가 다시 실행되기 때문에 클래스형 컴포넌트 보다 조금 더 느릴 수 있다. 그러니까 클래스형 컴포넌트 일때는 render() 이 부분만 렌더링될 때마다 실행됐다면, 함수형 컴포넌트에서는 const Header = () => {..} 이 함수 자체가 다시 실행된다.

다만 set함수는 비동기적으로 실행되기 때문에 state 값이 바뀔 때마다 set함수 갯수만큼 여러 번 렌더링 되는 것이 아니라 딱 한 번 렌더링 된다. set함수들을 다 모아서 한 번 렌더링. 그래서 set함수들이 비동기적으로 실행되게 된다.

이전 state값을 써야 한다면 setValue((prevValue) => prevValue + 1) 이런 식으로 함수형으로 사용할 수도 있다.