[React] Hook API ep.2

react의 Hook API로 프로젝트를 진행하면서 대표적으로 가장 많이 사용하는 Hook을 정리해보려 한다.

---

📌 useState

• 상태 유지 값과 그 값을 갱신하는 함수를 반환
• 최초로 렌더링 하는 동안, 반환된 state는 초기화 된 인자(initialState )의 값과같다.

💡 쉽게 말해 아래 예시 코드와 같이 state 라는 이름으로 state를 선언할 때, initialState로 초기화 한다는 말이다.

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

• setState 함수는 state를 생신할 때 사용된다. 새 state의 값을 받아 컴포넌트 리렌더링 큐에 등록한다.

💡 다음 리렌더링 시에 "useState"를 통해 반환받은 첫 번째 값은 항상 갱신된 최신 state가 된다.

setState(newState)

💻 useState 만들기

아래 예제는 firstState라는 state hook을 1로 선언 후 setFirstState 를 사용해 2로 state의 값을 변경한 예시이다.

import React, {useState} from 'react';

export default function StateEx() {
  const [firstState, setFirstState] = useState(1);
  					.
                    .
                    .
  const setStateFunc = () => {
    setFirstState(2);
  }
}

---

📌 useEffect

• 명령형 또는 어떤 effect를 발생하는 함수를 인자로 받는다.
• useEffect에 전달된 함수는 렌더링이 완료된 후에 수행한다.
• 기본적으로 useEffect는 모든 렌더링이 완료된 후에 수행되지만, 특정 값이 변경되었을 때만실행되게 할 수도 있다.
• class component의 componentDidMount, componentDidUpdate, componentWillUnmount의 동작을 수행할 수 있다.

💡 그러나 class component의 componentDidMount와 componentDidUpdate와는 다르게 
"useEffect" 로 전달된 함수는 지연 이벤트 동안에 레이아웃 배치와 렌더링을 완료한 이후에 실행된다.

• effect를 수행하고 component를 mount하거나 unmount 할 때 한 번만 실행하고 싶다면 useEffect의 두 번재 인자로 빈 배열([])을 전달하면 된다.
  -특정 상태가 변경했을 시 effect를 수행하고 싶다면 useEffect의 두 번째 인자에 해당 값을 넣어 해당 값이 변경됐을 시 effect를 수행할 수 있다.

💻 useEffect 만들기

아래 예제는 두 가지 useEffect로 componentDidMount와 componentDidUpdate를 보여주는 예시이다.

import React, {useState, useEffect} from 'react';
import {View, Text, TouchableOpacity} from 'react-native;

export default function EffectEx() {
  const [firstState, setFirstState] = useState(false);
  
  useEffect(() => {
    console.log('첫 렌더링!');
  }, []);
  
    useEffect(() => {
    console.log('firstState 값 변경 감지!');
  }, [firstState]);
  
  return (
    <View>
    	<TouchableOpacity onPress=(() => setFirstState(!firstState)>
    		<Text>Click!</Text>
    	</TouchableOpacity>
    </View>
  );
}

첫 렌더링 시 console log의 출력은 '첫 렌더링!'이 호출될 것이다. 그런 후 'Click' 버튼을 누르면 firstState의 값이 변경돼 두 번째 useEffect가 실행되며, 'firstState 값 변경 감지!'의 로그가 출력될 것이다.

---

📌 useContext

• context 객체(React.createContext에서 반환된 값)을 받아 그 context의 현재 값을 반환한다.
• context의 현재 값은 트리 안에서 현재 Hook을 호출하는 컴포넌트의 가장 가까이에 있는 <Context.Provider>의 value prop에 의해 결정된다.
• 컴포넌트에서 가장 가까운 <Context.Provider>가 갱신되면 useConext를 사용하고 있는 컴포넌트 자체에서부터 다시 렌더링 된다.
• useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다.

💡 useContext(MyContext) 는 class component의 
static contextType = MyContext 또는 <MyContext.Consumer>와 같다.

💡 useContext(MyContext)는 context를 읽고 context의 변경을 구독하는 것만 가능하다.

참조 react 공식 doc