React Hooks

1. useState

//useState import  
import { useState } from 'react';

const [value, setValue] = useState('default value');

useState()는 인수로 상태의 기본값을 가진다. 초기값이 없다면 빈 문자열('')을 넣어준다.
useState가 호출되면, 2개의 요소를 갖는 배열을 반환한다.

[value(상태 값), setValue(상태를 설정하는 함수)] 

이 배열을 javascript 문법인 배열드스터럭처링 할당을 통해 변수에 저장한다.

const [value, setValue] = useState('default value');

하나의 useState함수는 하나의 상태 값만 관리할 수 있다. 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 되지만, 뒤에서 설명할 useReduce 함수를 통해 간단히 표현이 가능하다.

2. useEffect

//useEffect import
import { useEffect } from 'react';

useEffect(() => {}, [])

useEffect()는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정하는 Hook이다.

useEffect()는 인수로 두 가지 값을 가지는데, 첫 번째 인수는 두 번째 인수인 배열 안의 요소들의 값이 변할 때 마다 호출되는 함수이다. 두 번째 요소가 빈 배열일 때는 리액트 컴포넌트가 render될 때마다 첫 번째 인수인 함수가 호출 된다.

기본적으로는 렌더링 직후마다 실행되고, 두 번째 인수인 배열에 넣어주는 값에 따라 실행 조건을 바꿀 수 있다.

useEffect()의 두 번째 인수로 빈 배열( [ ] )을 넣어주면 리액트 컴포넌트가 화면에 맨 처음 렌더링될 때만 첫 번째 인수인 함수를 호출하고, 값이 업데이트될 때는 호출하지 않는다.

배열 안에는 useState를 통해 관리하고 있는 state값을 넣어도 되고, props로 전달받은 값을 넣어도 된다.

3. useReducer

//useReducer import
import { useReducer } from 'react';

const reducer = (state, action) => {
  return {
  	...state,
    [action.name]: action.value
  };
  
const [state, dispatch] = useReducer(reducer, {
  attribute1: '',
  attribute2: ''
});

reducer = state(현재 상태)와 action(업데이트를 위해 필요한 정보를 담은 값)을 전달받아 새로운 상태를 반환하는 함수.

useReducer()는 2개의 인수를 갖는다.

(reducer, 'default value')

첫 번째 인수에는 reducer함수를 넣고, 두 번째 인수에는 reducer의 기본값을 넣어준다.

useState()처럼 디스트럭처링 할당을 통해 변수에 저장한다.

[state(현재 가리키고 있는 상태), dispatch(특정 작업을 발생시키는 함수)]

=> useReducer()안에 인수를 넣어주면 reducer 함수가 호출된다.

useReducer()의 장점: 컴포넌트 업데이트 로직을 컴포넌트 바깥으로 빼낼 수 있다.

4. useRef

const nameInputRef = useRef();

<input
  ref={nameInputRef}
/>

console.log(nameInputRef.input.value)

ref프로퍼티는 key프로퍼티와 같이 내장 프로퍼티이고, 모든 html 요소에나 추가할 수 있다. 왜냐하면 어떤 html 요소라도 reference와 연결될 수 있기 때문이다.

console 에 찍어보면 useRef()는 항상 'current'라는 프로퍼티를 가진 객체를 return한다. 그 current는 해당 ref가 연결 된 값을 가지고 있다.
그 current 프로퍼티를 가진 객체는 실제 DOM node이다. 그 DOM node를 조작해서 여러가지 작업을 할 수 있지만, 그러한 세세한 조작을 하지 않으려고 React라이브러리를 쓰는 것이므로 DOM node는 따로 조작하지 않는 것이 좋다.

예를 들어서, 실시간으로 상태 관리를 하는 useState()처럼 input요소의 값에 우리가 타이핑하는 모든 순간마다 기록하지 않고, 버튼을 누르는 등의 특정 동작을 취했을 때, 그 때 input요소의 값에 접근해 value값을 가져오는 등의 일을 할 수 있다. 즉, 요소에 저장된 값에 접근할 수 있게 해준다.

어떤 컴포넌트에서 ref를 통해서 DOM에 접근하는 방식은 react가 상태를 관리하는게 아니라 우리가 DOM node에 직접 접근하는 방식이므로 그 컴포넌트를 Uncontrolled Component 라 부른다. 반대로 state를 통해 react가 실시간으로 상태를 관리하는 컴포넌트는 Controlled Component라 부른다.

5. useCallback()

//import useCallback
import { useCallback } from 'react';

const [state, setState] = useState('');

const stateHandler = useCallback(() => {
  setState(() => {});
})

useCallback()은 컴포넌트 실행 전반에 걸쳐 함수를 저장할 수 있게 하는 Hook. React에게 해당 함수를 실행때마다 재생성할 필요가 없다고 알려준다. 이를 통해 객체 타입인 함수도 원시값처럼 메모리의 같은 공간에 위치시킬 수 있게 되고, 따라서 rerender와 상관없이 값에 대한 접근과 비교가 가능하다.

useCallback()은 함수를 첫 번째 인자로 전달해주면 그 함수를 반환해 React 내부 저장 공간에 저장한다. 그리고 부모 컴포넌트가 rerender될 때, useCallback()이 그 저장한 함수를 찾아 참조값이 아닌 같은 함수 객체를 재사용한다.

useCallbakc()은 두 개의 인자를 가지는데, useEffect() 와 마찬가지로두 번째 인자로 useCallback 호출에 대한 조건을 배열의 형태로 가진다. 배열의 요소로는 state, props, context 등을 지정할 수 있다.

javascript에서 함수는 클로저이기 때문에 이러한 dependencies가 필요하다.