[React] React Hooks(리액트 훅)

기존 클래스형 컴포넌트의 문제점

클래스형 컴포넌트는 라이프 사이클 메서드를 통해 컴포넌트를 관리한다. 그러나 컴포넌트의 선언부터 this와 render의 사용,,, 코드가 늘어지고 복잡해지는 경향이 있다. 또 여러 인스턴스들을 생성하는 과정에서 성능이 저하되는 문제가 발생하기도 한다.

이러한 문제점을 해결하기 위해 함수형 컴포넌트를 위한 Hook이 도입되었다.

Hook은 리액트의 함수형 컴포넌트에서 상태값과 생명주기에 대한 접근과 관리를 가능하게 해준다. 함수형 컴포넌트는 한번 호출되고 나면 메모리에서 사라지는 문제가 발생하는데, Hook을 통해 이러한 문제점을 해결해주고, class형 컴포넌트를 대체할 수 있게 해주었다

Hook 사용 규칙

• Hook은 컴포넌트 최상위 레벨에서만 사용 가능하다.
• 일반 js 함수가 아닌 리액트 함수에서만 사용 가능하다. (Custom Hook은 예외)

---

useState

변수(상태)를 관리해주는 훅으로 해당 변수(상태값)이 변경될 때마다 화면을 렌더링해준다.

const [state, setState] = useState('초기값')

• setState는 일종의 함수로 setState()안에 변경하고 싶은 state 값을 넣어주면 된다
• 배열 혹은 객체의 경우에는 새로운 객체를 생성하여 setState에 넣어주어야 한다. 배열 객체의 경우에는 새로운 값을 인지해야 변경 가능해져서……….
• 렌더링이 필요하지 않은 값들이면 state에 담아줄 필요가 없음

useEffect

특정 경우에 특정한 함수가 발생하도록 하는 훅이다. 이를 통해 함수 컴포넌트에서도 side effect의 사용이 가능해진다. side effect란 컴포넌트가 화면에 렌더링된 이후에 비동기로 처리해야하는 부수적인 효과들이다.

useEffect(()=>{

},[deps])

• 의존성 배열에 따라 useEffect의 수행 순간이 결정된다
  • 아무 것도 없을 경우) 렌더링 될 때마다 실시
  • 빈 배열) 최초 렌더링 시에만 실시
  • 배열) 특정 값이 변경될 때만 실시

useMemo

Memo는 Memoization을 뜻하며 연산값을 재사용하는 것을 도와주는 훅이다. 이를 통해 컴포넌트의 성능을 향상시킬 수 있다.

const value = useMemo(() ⇒ {반환값},[deps]);

• 함수형 컴포넌트의 동작 과정
  • 렌더링→컴포너트 호출→내부 변수 초기화로 렌더링 될 때마다 함수 호출 및 변수 할당이 다시 일어난다. 이는 매우 비효율적.
  • useMemo를 사용 시 렌더링→컴포넌트 호출→Memo함수 재사용의 동작을 거친다. 처음 계산된 결괏값을 메모리에 저장해두어 렌더링이 계속 되어도 함수를 호출하지 않고 값만 메모리에서 꺼내와 재사용한다
• 메모리를 사용하는 것이므로 불필요한 것들까지 Memoization 할 시 성능이 저하된다 꼭 필요한 것들만 useMemo를 사용한다.

useCallback

useCallback 역시 메모이제이션을 통해 컴포넌트의 성능을 높여준다. useMemo가 값을 반환한다면 useCallback은 함수를 반환한다.

const value = useCallback(() ⇒{함수}, [deps])

• 함수를 최적화하고, 불필요한 재사용을 방지할 때 사용

useRef

Ref는 reference(참조)를 의미한다. useRef를 통해 변수를 선언하게 되면 초기화된 변경 가능한 ref 객체를 반환하고, 이는 컴포넌트 전 생애주기동안 유지 및 관리가 된다. 주로 DOM요소나 저장공간에 접근하기 위해 사용된다.

const value = useRef(’초기값’);

• {current: 초기값} 형태의 객체가 생성되고, 값의 변화를 줄 때에도 current를 이용한다.
• 숫자를 카운트할 때, 일반 변수에 담으면 렌더링할 시 숫자가 초기값으로 돌아간다. 하지만 useRef를 통해 선언한 변수는 렌더링이 되어도 카운트 값을 유지한다.
• focus 기능을 구현할 때 자주 사용된다.

useReducer

컴포넌트의 상태 로직을 관리하며 useState보다 복잡한 것들을 처리한다.

const [state, dispatch] = useReducer(reducer, initialState, init)

• state는 컴포넌트에서 사용할 상태이다.
• dispatch는 reducer 함수를 실행시키는 함수이다. 이를 통해 state의 업데이트가 일어나고 렌더링이 발생한다.
  • action을 객체로 받으며, type 속성 혹은 데이터를 같이 담을 수도 있다.
• reducer 함수는 상태를 업데이트하는 역할을 한다.
  • 컴포넌트 외부에서 작동한다.
  • state(현재 state 객체)와 action(dispatch의 action 인자)을 인자로 받으며, action값에 따라서 state 값을 변경한다.
• initialState는 초기 state 값이다. (배열이나 객체로 표현 가능)
• init은 초기 함수이다 (생략 가능)