[React-Native] #5_리액트 훅 (1) useState&useEffect

목차

• 리액트 훅(React Hook)이란?
• useState
• useEffect

---

1.  리액트 훅(React Hook)이란?

• Hook은 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 "연동(hook into)"할 수 있게 해주는 함수
• 함수형 컴포넌트가 등장하면서 기존의 클래스 컴포넌트의 단점인 복잡한 코드와 재사용을 위한 데이터 캐시 시스템의 API
  
  

  	훅	목적
  기본 훅	useState	상태 유지 및 변경
  	useEffect	이벤트 처리
  	useContext	정보 공유
  추가 훅	useReducer	상태 유지 및 변경 (Redux)
  	useCallback	콜백 함수 캐시
  	useMemo	데이터, 값 캐시
  	useRef	.
  	useImperativeHandle	.
  	useLayoutEffect	.
  	useDebugValue	.

• 참고 리액트 공식 문서 : https://ko.reactjs.org/docs/hooks-intro.html

Hook의 개요 – React

---

2.  useState

• 형식 
  

  import {useState} from 'react' //react에서!!
  
  const[값, 값-변경-함수] = useState(초깃값)​

• useState는 '값'이 변경이 될 때마다 렌더링을 한다.
  '값'을 변경하기 위해서는 '값-변경-함수'를 통해서 상태를 변경해야 한다.
  
  
• 버튼을 누르면 누른 횟수만큼 표시되는 예제 
  

  import React, {useState} from 'react' //useState import
  import {SafeAreaView, Text, Button} from 'react-native'
  
  export default function App() {
    
    //count라는 값 선언 & count를 변경할 수 있는 setCount 함수 선언
    const [count, setCount] = useState(0) //초깃값 = 0
  
    return(
      <SafeAreaView style={{padding:'5%', justifyContent:'space-evenly', alignItems:'center'}}>
        <Text>{count}</Text>
        <Button title={'click'} onPress={() => setCount(count + 1)}/>
      </SafeAreaView>
    )
  }​​

• 분석
  

  <Text> {count} </Text>
  <Button title={'click'} onPress={() => setCount(count + 1)}/>
  //Text에서 count를 표시
  //버튼을 onPress시, setCount(Count변경 전용 함수)에서 count+1를 count에 반영

---

3.  useEffect

• 형식
  

  import {useEffect} from 'react'
  useEffect(() => {콜백함수}, [의존성-목록])

• useEffect는 처음 마운트될 때 실행, 재렌더링될 때마다 실행(의존성목록생략시), '의존성-목록'이 충족될 때마다 '콜백함수'를 실행
  return문으로 컴포넌트를 없앨 때 한 번만 실행되는 기능도 있다.
  
  
• 버튼을 누를 때(count값이 바뀔 때)마다 console.log실행하는 예제
  

  import React, {useEffect, useState} from 'react'
  import {SafeAreaView, Text, Button} from 'react-native'
  
  export default function App() {
    const [count, setCount] = useState<number>(0)
  
    const comment = ''
    useEffect(() => {
      console.log("useEffect의 콜백함수 실행")
    },[count])
  
    return(
      <SafeAreaView style={{padding:'5%', justifyContent:'space-evenly', alignItems:'center'}}>
        <Text>{count}</Text>
        <Button title={'click'} onPress={() => setCount(count + 1)}/>
      </SafeAreaView>
    )
  }​

첫번째 log는 앱이 실행되면서 마운트됐을 때 한 번 실행, 이후 클릭 3번