[React] React Hook API (1)

해당 포스팅에서는 React에 내장된 Hook API에 대해  알아보겠습니다.

1️⃣ useState

2️⃣ useEffect

---

 

⚓️ useState

함수형 컴포넌트에서 상태 관리

state = {
	isLoading : true,
	recipeList : []
}

// AA라는 list가 있다고 가정.
this.setState({recipeList:AA, isLoading:false});

 클래스에서는 state를 객체로 묶어서 관리합니다.

 

const [value, setValue] = useState(100);

useState는 배열을 반환합니다.

1. value : state 값
2. setValue : state를 설정하는 함수
3. value의 초기값을 100으로 설정.

(value, setValue는 원하는 이름의 변수로 아무렇게나 네이밍해도 상관없습니다.

하지만, [A, setA] 라 네이밍하는 것이 코딩하는 데 편할 거예요〰️)

 

setValue(0);
setValue(value-1);

• setValue에 파라미터를 넣어서 호출합니다
• 전달받은 파라미터로 value로 값이 바뀌게 되고 컴포넌트는 정상적으로 리렌더링됩니다.

여기서, useState를 여러 번 사용하면 어떻게 될까요❓

// useState를 여러 번 사용하기
setResult(value);
setFirst(Math.ceil(Math.random() * 9));
setSecond(Math.ceil(Math.random() * 9));
setValue('');

setState()를 호출할 때마다 리렌더링된다고 했는데, 위와 같이 한 번에 useState를 호출하면 4번 리렌더링이 일어날까요?

아닙니다. 렌더링은 딱 한 번 일어나는데요, 이것을 통해서 비동기임을 알 수 있습니다.

 

 

 

 

 

 

 

⚓️ useEffect

React Life Cycle(componentDidMount, componentDidUpdate, componentWillUnmount)에 해당하는 로직을 사용 가능

function useEffect(effect: EffectCallback, inputs?: InputIdentityList)

• effect : render할 때마다 매번 호출됩니다.
• input? : 특정 state가 변경된 경우에만 effect가 실행되게 input을 지정할 수 있습니다.

( 리액트 공식 가이드에 따르면, 비동기 작업을 패칭할 땐 useEffect 콜백 함수 안에 직접 넣지 말고 그것을 처리하는 함수를 호출하는 것이 좋다고 하네요〰️ )

 

1️⃣ Class에서 componentDidMount()를 사용한 경우

// API로부터 data를 fetch하는 과정. 완료 전까지는 Loading...을 띄워줌.
class Data extends React.Component {
  constructor(props) {
    super(props);
    this.state = { item : null };
    this.setData = this.setData.bind(this);
  }

  componentDidMount() {
    API.getData()
      .then((response) => { this.setData(response) });
  }

  setData(data) {
    this.setState({ item: data });
  }
  
  render() {
    const isLoading = (this.state.item == null);
  	return { isLoading ? "Loading..."  : this.state.item }
  }
}

실행 순서 : constructor → render → componentDidMount ( setData ) → render → componentDidUpdate

 

2️⃣ 함수형 컴포넌트에서 useState()를 사용한 경우

// useEffect를 사용하여 다음과 같이 구현
import { useState, useEffect } from 'react';

export function Data() {
  const [data, setData] = useState(null);

  useEffect(() => {
    API.getData()
      .then((response) => { setData(response) });
  }, []);
  
  const isLoading = (data == null);
  return { isLoading ? "Loading..."  : data }
}

위 코드에서 useEffect의 두 번째 인자는 빈 리스트([])입니다. 이로 인해 처음 마운트 완료 후(componentDidMount)에만 useEffect가 실행됩니다.

만약 두번째 인자가 아예 없었다면 어떻게 될까요❓무한 반복으로 리렌더링될 것입니다. 이처럼, useEffect를 사용할 때는 두 번째 인자를 유의해서 사용하도록 하세요!

 

💡 clean-up

: effect가 함수를 반환하면 리액트는 그 함수를 정리가 필요한 때에 실행시킵니다.

• 리액트는 컴포넌트가 마운트 해제되는 때에 정리(clean-up)를 실행합니다.
• 정리(clean-up)가 필요 없는 경우에는 반환을 하지 않으면 됩니다.

const useBeforeLeave = (onBefore) => {
    const handle = (e) => {
        const {clientY} = e;
        if (clientY <= 0) //  위로 가면 발생
            onBefore() ; 
    }

    useEffect(() => {
        document.addEventListener("mouseleave", handle);
        return () => document.removeEventListener("mouseleave", handle);
    }, []);
};

 

💡 한 컴포넌트 내에서 effect를 여러 번 사용할 수 있다 !

• 서로 관련 없는 로직을 분리할 수 있습니다.
• 리액트는 컴포넌트에 사용된 모든 effect를 지정된 순서에 맞춰 적용합니다.

 

 

 

 

 

🔗  참고 링크

Hooks API Reference – React

리액트의 Hooks 완벽 정복하기

React의 새로운 패러다임, React Hooks