[React Native] State와 React Hook(useState) - 함수형 컴포넌트와 클래스형 컴포넌트 동적인 데이터 다루기

반응형

State

클래스형 컴포넌트에서 동적인 데이터를 다룰 땐 state를 사용한다.(글로벌 변수라고 생각)

setState

state에 있는 값을 바꾸기 위해서는 무조건 this.setState를 거쳐야한다.

리액트에선 이 함수가 호출되면 컴포넌트가 리렌더링 되도록 설계되어 있기 때문이다.

setState는 객체로 전달되는 값만 업데이트 한다

state를 이용한 버튼을 누르면 숫자(number)가 카운트 되는 코드

import React, { Component } from 'react';
import {View, Text, Button} from 'react-native';
class App extends Component {
  state = {
    number: 0
  };
  up = () => {
    this.setState({
      number: this.state.number + 1
    });
  };
  down = () => {
    this.setState({
      number: this.state.number - 1
    });
  };
  render() {
    return (
      <View>
        <Text style={{fontSize:30}}>카운터</Text>
        <Text style={{fontSize:30}}>값:
               {this.state.number}</Text>
        <Button onPress={this.up} title="+">
                </Button>
        <Button onPress={this.down} title="-"> 
                </Button>
      </View>
    );}}
export default App;

up과 down에 화살표 함수를 쓰는 이유, - this를 자동으로 바인딩 해준다.

JS에서 클래스 메서드는 기본적으로 바인딩 되어 있지 않다.

this.up을 바인딩 하지 않고 onPress에 전달하였다면, 함수가 실제로 호출될 때 this는 undefined 된다.

일반적으로 onPress={this.up}과 같이 뒤에 ()를 사용하지 않고 메서드를 참조할 경우, this.down.bind(this)으로 해당 메서드를 바인딩 해야한다.

하지만, 화살표함수를 사용하면 this는 상위 태그를 가르키기 때문에 bind하지 않아도 사용 가능하다.

​

바인딩(React Binding)은 리액트에서 컴포넌트에 이벤트 메서드를 연결하는 방법 중 하나로 함수에서 사용하는 this의 대상을 지정해주는 역할을 한다.

​

render함수 안에서 this는 컴포넌트 자체를 가리키지만 이벤트 (onPress)함수 안에서 this는 아무것도 가르키지 않기 때문에 onPress함수를 bind로 this를 바인딩 해주어야 한다.

 

React Hook

Hook은 리액트 v16.8에 새로 도입된 기능이다. 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있는 기술을 Hook이라고 부른다.

​즉, Hook은 함수 컴포넌트에서 React state(상태변화)와 생명주기 기능(lifecycle features)을 “연동(hook into)”할 수 있게 해주는 함수이다.

​

기존에는 함수 컴포넌트를 사용하다가 state를 추가하고 싶으면 클래스 컴포넌트로 바꾸는 번거로움이 있었다.

Hook은 만들어진 목적 자체가 함수 컴포넌트에서 사용하기 위해서이기 때문에 클래스 컴포넌트 안에서는 동작하지 않는다.

클래스 컴포넌트 단점

Logic의 재사용이 어렵다.

클래스형 컴포넌트에서는 컴포넌트 자체를 재사용 할 수 있지만, 컴포넌트 클래스 부분적인 API 사용 및 state를 다루는 등의 처리에는 재사용에 제약이 따른다.

​

코드가 길고 복잡해진다.

기본 규칙을 따라야 하기 때문에 코드가 복잡하고 길다

​

Hook 처리시 장점

함수형 컴포넌트에서는 원하는 기능을 함수로 만든 후 필요한 곳에 넣어주기만 하면 되기 때문에 로직의 재사용이 유연해진다.

클래스형 컴포넌트가 가지고 있던 복잡성, 재사용성의 단점들이 해결된다.

 

기본 Hook인 useState

클래스 컴포넌트는 state를 바로 사용 가능했지만 함수컴포넌트에서는 사용할 수 없다.

함수형 컴포넌트에서는 리액트에서 자체적으로 지원하는 ‘useState’라는 React hooks를 사용해서 상태를 관리할 수 있다.

형식

// import 하기
import React, {useState} from "react";
// useState 선언
const [<상태 값 저장 변수>, <상태 값 갱신 함수>] = useState(<상태 초기 값>);

반응형

 

useState를 이용한  숫자(number) 카운트 예제

import React, {useState} from "react";
import {View, Text, Button} from 'react-native';

function App(){
  const [number, setNumber] = useState(0)

  const up = () =>{
    setNumber(number+1)
  }
  const down = () =>{
    setNumber(number-1)
  }
  return(
    <View>
      <Text style={{fontSize:30}}>카운터</Text>
      <Text style={{fontSize:30}}>값: {number}</Text>
      <Button title="+" onPress={up} />
      <Button title="-" onPress={down} />
    </View>
  );
}
export default App;

실행화면

 

Hook API

훅	목적
기본 훅	useState	상태 유지 및 변경
	useEffect	이벤트 처리
	useContext	정보 공유
추가 훅	useReducer	상태 유지 및 변경 (Redux)
	useCallback	콜백 함수 캐시
	useMemo	데이터, 값 캐시
	useRef	컴포넌트나 HTML 요소를 래퍼런스로 관리