React Hook에 대해 알아보자

React Hook

React Hook은 React 16.8 버전에서 도입된 기능으로, 함수형 컴포넌트에서도 상태(state) 와 생명주기 메서드를 사용할 수 있게 해준다. 

1. useState

function ImageGallery() {
  const [index, setIndex] = useState(0);
  // ...

• 사용자 입력과 같은 정보를 기억할 수 있다. 

2. useContext

function Button() {
  const theme = useContext(ThemeContext);
  // ...

• 구성 요소가 정보를 props로 전달하지 않고 멀리 있는 부모로부터 정보를 받을 수 있다. 

3. useRef

function Form() {
  const inputRef = useRef(null);
  // ...

• 구성 요소가 DOM 노드나 시간초과 ID와 같이 렌더링에 사용되지 않는 일부 정보를 보유할 수 있다. 상태와 달리 참조를 업데이트 해도 구성 요소가 다시 렌더링 되지 않는다

4. useEffect

function ChatRoom({ roomId }) {
  useEffect(() => {
    const connection = createConnection(roomId);
    connection.connect();
    return () => connection.disconnect();
  }, [roomId]);
  // ...

• 구성 요소를 외부 시스템에 연걸하고 동기화 할 수 있다. 네트워크, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리를 사용하여 작성된 위젯 및 기타 비 react 코드 처리가 포함

5. useMemo

function TodoList({ todos, tab, theme }) {
  const visibleTodos = useMemo(() => filterTodos(todos, tab), [todos, tab]);
  // ...
}

• 다시 렌더링 성능을 최적화하는 일반적인 방법은 불필요한 작업을 건너뛰는 것
• 계산 결과 캐시

Built-in React Hooks – React