처음 배우는 리액트 네이티브 : 6장 Hooks

Hooks는 리액트 16.8 버전에서 새롭게 추가된 기능으로, 리액트 네이티브 0.59 버전부터 사용할 수 있다. 이전에는 컴포넌트 상태 관리나 생명 주기에 따른 특정 작업 수행을 위해 클래스형 컴포넌트를 사용해야 했지만 Hooks 덕분에 함수형 컴포넌트에서도 가능하게 되었다.

1. useState

---

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

useState 함수를 호출하면 파라미터로 전달한 값을 초깃값으로 갖는 상태 변수와 그 변수를 수정할 수 있는 세터 함수를 배열로 반환한다. 관리해야 하는 상태의 수만큼 여러 번 사용할 수 있다. 상태를 관리하는 변수는 반드시 세터 함수를 이용해 값으 ㄹ변경해야 하고, 상태가 변경되면 컴포넌트가 변경된 내용을 반영하여 다시 렌더링한다.

세터 함수를 사용하는 방법

세터 함수를 사용하는 방법은 두 가지이다.

1. 세터 함수에 변경될 상태의 값을 전달하는 방법
2. 세터 함수의 파라미터에 함수를 전달하는 방법

   setState(prevState => {});

   전달된 함수에는 변경되기 전의 상태 값이 파라미터로 전달되며 이 값을 어떻게 수정할지 정의하면 된다. 세터 함수는 비동기로 동작하기 때문에 상태 변경이 바로 일어나지 않는다. 상태 업데이트가 여러 번 일어날 때는 함수를 인자로 전달해야 한다.

2. useEffect

---

useEffect는 컴포넌트가 렌더링될 때마다 원하는 작업이 실행되도록 설정할 수 있는 기능이다.

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

첫 번째 파라미터로 전달된 함수는 조건을 만족할 때마다 호출되고, 두 번째 파라미터로 전달되는 배열을 이용해 함수가 호출되는 조건을 설정할 수 있다.

함수의 실행 조건

• 두 번째 파라미터에 빈 배열([])을 전달하면 마운트될 때(처음 렌더링될 때만) 함수가 호출된다.
• 빈 배열을 실행 조건으로 받았을 경우 컴포넌트가 언마운트될 때 정리 함수를 실행시킨다.
  * 정리 함수 : useEffect에서 전달하는 함수에서 반환하는 함수

3. useRef

---

자바스크립트에서 getElementByID, querySelector처럼 특정 DOM을 선택하는 것처럼 리액트 네이티브에서는 useRef를 이용해서 특정 컴포넌트를 선택할 수 있다.

const ref = useRef(initialValue);

4. useMemo

---

동일한 연산의 반복 수행을 제거해서 성능을 최적화하는 데 사용한다.

useMemo(() => {}, []);