리액트 훅(React Hook)

01. 리액트 훅이란?

- 리액트 클래스형 컴포넌트에서 이용하던 코드를 작성할 필요없이 함수형 컴포넌트에서 다양한 기능을 사용할 수 있게 만들어준 라이브러리

- 클래스형 컴포넌트의 단점(컴포넌트의 재사용 어려움, 컴파일 단계에서의 코드 최적화 어려움 등)을 보안

 

02. 리액트 훅 규칙

02-1  최상위에서만 Hook 호출 가능

- 리액트 훅은 순서에 의존하므로 조건문, 반복문 안에서 실행하게 될 경우, 해당 부분의 순서가 꼬일 가능성이 있음

02-2 리액트 함수 내에서만 호출 가능

- 일반적인 js 함수에서는 호출 불가

- 함수형 컴포넌트, custom hook 에서 호출 가능

02-3 같은 훅 여러번 호출 가능

const Form = () => {
  // useState 여러번 호출 가능
  const [name, setName] = useState('Mary');
  const [surname, setSurname] = useState('Poppins');

 

 

03. 자주 쓰이는 리액트 훅

03-1 useState

- 기본 형태 : const [변수명, 상태를 업데이트 할 함수명] = useState(초기값)

- 컴포넌트에서 상태값을 추가 할 때 사용

- 초기값을 파라미터로 넣어서 호출

- 첫번째 원소는 현재 상태, 두번째 원소는 Setter함수 (Setter함수 -> 파라미터로 전달 받은 값을 최신 상태로 설정)

import React, { useState } from 'react';

const Counter = () => {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(number + 1);
  }

  const onDecrease = () => {
    setNumber(number - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

03-2 useEffect

- 기본 형태 : useEffect( () => {익명함수}, [deps])

- 첫번째 파라미터에는 함수, 두번째 파라미터에는 deps(의존값이 들어있는 배열)

- deps(의존성 배열)의 종류에 따라 렌더링의 횟수 조절 가능

1) [] = 최초 렌더링(마운트) 될 때 한번만 실행
2) [상태값1, 상태값 2..] = 선언한 상태값들이 업데이트 될 때만 실행
3) 생략 = 리렌더링시마다 반드시 실행

import React, { useEffect } from 'react';

const User = ({ user, onRemove, onToggle }) => {
  useEffect(() => {
    console.log('컴포넌트가 화면에 나타남');
    return () => {
      console.log('컴포넌트가 화면에서 사라짐');
    };
  }, []);
  return (
    <div>
      <b
        style={{
          cursor: 'pointer',
          color: user.active ? 'green' : 'black'
        }}
        onClick={() => onToggle(user.id)}
      >
        {user.username}
      </b>
      &nbsp;
      <span>({user.email})</span>
      <button onClick={() => onRemove(user.id)}>삭제</button>
    </div>
  );
}

const UserList = ({ users, onRemove, onToggle }) => {
  return (
    <div>
      {users.map(user => (
        <User
          user={user}
          key={user.id}
          onRemove={onRemove}
          onToggle={onToggle}
        />
      ))}
    </div>
  );
}

export default UserList;

03-3 useRef

- 특정 DOM에 접근하여 조작을 가능하게 하는 훅

- .current를 사용하여 태그에 접근 --> 값을 변경해도 리랜더링 되지 않음

function App() {
    const inputRef = useRef(); // useRef 선언
    
    return (
    	<div>
    		<Input ref={inputRef}/> // ref 전달 
			<button onClick={()=>inputRef.current.focus()}> Focus </button>
        </div>
	);
}

 

03-4 useReducer

- 기본형태 : const [변수명, dispatch] = useReducer[reducer, 초기값, 초기함수)

- 전 상태와 Action을 결합하여 새로운 상태값 생성

- dispatch : reducer 함수를 실행시키며, action 객체(=어떠한 행동인지를 나타내는 type 속성과 관련 데이터로 구성)를 인자로 받으며, action 객체를 통해 컴포넌트 내에서 상태 값(state)의 업데이트를 일으킴

-reducer : dispatch를 통해 실행되며, 컴포넌트 외부에서 상태 값(state) 를 업데이트 한다. 함수의 인자로는 state와 action을 받으며 이를 통해 새로운 state를 반환한다.