[React-Native] Hook

오늘 React-Native를 사용함에 있어서 중요한 Hook에 대해 알아보자.

Hook의 종류는 많지만 아래 5가지 정도만 알아도 충분하다고 생각한다.

1. useState

2. useEffect

3. useCallback

4. useMemo

5. useRef

 

리랜더링 조건

Hook은 랜더링과 밀접한 관련이 있으므로 리랜더링 되는 조건을 알고 있는 편이 좋다.

• 자신의 state가 변경될 때
• 부모 컴포넌트로부터 받은 props가 변경될 때
• 부모 컴포넌트가 리렌더링될 때

 

1. UseState

• 생명주기와 밀접한 연관이 있는 요소, 렌더링과 관련있는 값을 저장하기 좋다

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

 

useState로 버튼을 누를 때마다 숫자가 증가하는 코드를 짜보자.

const App = () => {
  const [count, setCount] = useState(0);

  return (
    <SafeAreaView style={styles.view}>
      <TouchableOpacity onPress={() => setCount(state + 1)}>
        <Text>Add Count</Text>
      </TouchableOpacity>
      <Text>
        {state}
      </Text>
    </SafeAreaView>
  )
};

 

실행화면

 

 

2. useEffect

• 렌더링과 관련없는 값을 저장하기 좋다.
• 전 생애 주기를 통해 유지되는 값
• 값이 바뀌어도 렌더링하지 않고 렌더링해도 그대로 유지한다.

 

위에서 쓴 숫자가 증가하는 코드를 가지고 useEffect를 알아보자.

const App = () => {
  const [state, setState] = useState(0);

  useEffect(() => {
	//코드
  }, []);

  return (
    <SafeAreaView style={styles.view}>
      <TouchableOpacity onPress={() => setState(state + 1)}>
        <Text>Add Count</Text>
      </TouchableOpacity>
      <Text>
        {state}
      </Text>
    </SafeAreaView>
  )
};

 

마운트 됐을 때

---

useEffect(() => {
     console.log("최초 랜더링 시 한 번 실행");
},[]);

 

숫자가 올라가도 useEffect는 한번만 실행된다.

 

 

언마운트 됐을 때

---

 

useEffect(() => {
     return ()=>{
     	console.log("언마운트 시 실행");
     }
},[]);

 

쉽게 말해서 해당 화면이 사라질 때 실행한다.

예시로 Stack Navigation을 사용해서 뒤로가기 버튼을 눌렀을 때 실행된다.

 

실행화면

 

 

State가 변경 됐을 때

---

const [count, setCount] = useState(0);

useEffect(() => {
     console.log("state 값 변경");
},[count]);

 

num이 바뀔 때마다 useEffect가 실행된다.

 

실행화면

 

3. useCallback

• 함수를 재사용하고 싶을 때 사용
• 함수를 반환
• 첫번째 인자로 넘어온 함수를, 두번째 인자로 넘어온 배열 내의 값이 변경될 때까지 저장해놓고 재사용할 수 있음

 

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

 

4. useRef

• 렌더링과 관련없는 값을 저장하기 좋음
• 전 생애 주기를 통해 유지되는 값
• 값이 바뀌어도 렌더링하지 않음 / 렌더링해도 그대로 유지

 

const refContainer = useRef(initialValue);
refContainer.current //.current에 데이터가 저장되어 있음

 

5. useMemo

• 결과값을 재사용하고 싶을 때 사용
• 값을 반환
• a나 b의 값이 변경되지 않으면 실행되지 않음

 

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);