React Hooks (useState, useEffect)

 

 

상태 State 개념과 React Hooks를 소개하고, useState와 useEffect를 작성하는 방법을 알아보겠습니다.

 

 

 

State

React에서 핵심 개념 2가지 중 하나인 State 상태 개념은 컴포넌트 자체적으로 보유하고 있는 데이터입니다.

또 다른 하나인 props는  상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 방식입니다.

 

 

React Hooks

Hooks는 리액트 v16.8에 새로 도입된 기능으로 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState,

랜더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 다양한 작업을 할 수 있게 해 줍니다.

 

React가 지원하는 함수 중 use로 시작하는 것으로 통칭한 명칭입니다.

• useState
• useEffect

 

 

useState는 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다.

 

const [value, setValue] = useSatate(0);

 

useState() 함수의 파라미터에는 상태의 기본값을 넣어 줍니다.

현재 0을 넣어 주었는데, 카운터의 기본값을 0으로 설정하겠다는 의미입니다.

이때 함수가 호출되면 배열을 반환하게 되는데,

 

• 첫 번째 인자의 값인 value는 상태 값(변수)
• 두 번째 인자의 값은 상태를 설정하는 함수입니다.

따라서 이 useState 함수에 파라미터를 넣어 호출하면 전달받은

파라미터 값이 바뀌고 컴포넌트가 정상적으로 리렌더링됩니다.

 

 

 

 

useState 여러 번 사용하기

하나의 useState 함수는 하나의 상태 값만 관리할 수 있습니다.

컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 됩니다.

 

 

 

 

 

useEffect

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

클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방합니다.

 

 

useEffect 또한 코드 상단에서 import 구문을 통해 불러오고, 다음과 같이 사용합니다.

 

useEffect는 해당 컴포넌트의 연산이 끝난 이후 함수를 실행합니다.

즉, 화면에 렌더링 후 useEffect 함수가 수행한다고 할 수 있습니다.

 

사진상, useEffect에 title이 바뀌도록 함수를 수행하도록 하였습니다.

 

 

 

 

 

조금 뒤늦게 title도 따라 바뀝니다.

이 부분이 바로 '해당 컴포넌트의 연산이 끝난 이후 함수를 실행한다'는 의미입니다.

 

마지막으로 React Hooks는 함수형 컴포넌트에서만 사용이 가능합니다.