React Native rendering(렌더링) state(상태)와 Hook 함수(화면 변경, 화면 동적 수정, useState)

React Native rendering(리렌더링) state(상태)와 Hook 함수

 

이번에는 React Native를 이용하여, 간단한 계산기를 만들어 보려고 합니다.

간단한 계산기를 만들어 보기 전에  미리 알아둬야 할 내용에 대해 언급 해 보겠습니다.

 

리렌더링

동적으로 변하는 값은 state를 이용하여 처리 컴포넌트에서 관리하는 변경 가능한 값을 의미 합니다.

props와 성격이 비슷하지만, props는 부모 컴포넌트로부터 전달받은 데이터로 관리의 주체가 부모 입니다.

 

하지만 state는 컴포넌트 내에서 생성 및 관리하는 데이터로 관리의 주체가 컴포넌트 자신이 됩니다.

 

[컴포넌트가 리렌더링 되는 조건]

- 컴포넌트가 변경되었을 때

- 컴포넌트로 전달된 props가 변경되었을 때

- 부모 컴포넌트가 리렌더링 됬을 때

 

※ 주의: 너무 잦은 리렌더링은 성능에 영향을 줍니다.

 

state를 생성하고 관리하기 위해 useState라는 Hook을 사용 합니다. (React 16.8 ver 추가된 기능)

Hook 함수 규칙

- 함수 컴포넌트와 커스텀 Hook에서만 사용해야 합니다.

- 함수 최상위에서만 사용해야 합니다.

- Hook은 항상 use로 시작합니다.

 

Hook + ESLint

Hook과 관련된 ESLint를 설정하지 않아도 Hook을 사용하는데 문제는 없습니다.

Hook을 사용할 때 지켜야 하는 규칙을 강제해서 사용자의 실수를 막을 수 있으니 ESLint 설정을 권장한다고 합니다.

npm install -D eslint-plugin-react-hooks

 

다운로드 완료 후 .eslintrc.json 파일 extends hook 추가

"extends": [
        "eslint:recommended",
        "plugin:react/recommended",
        "plugin:react/jsx-runtime",
        "plugin:react-hooks/recommended"
    ],

 

 

useState Hook으로 state 관리

const [상태변수, 상태 변경 함수] = useState(초깃값);

 

매개변수에 어떤 값도 전달하지 않으면 초깃값은 undefined가 됩니다.

 

현재 state 기준으로 state 변경하기 (함수형 업데이트)

함수를 전달했을 때 반드시 상태 값을 반환해야 한다. 함수에서 값을 반환하지 않으면 state는 undefined가 되니 주의합니다.

setResult((현재 상태) => {
   return 반환 값;
});

 

 

예시 코드

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View } from 'react-native';
import Button, {ButtonTypes} from './components/Button';
import {useState} from 'react';

  const App = () => {

  // useState Hook
  const [result, setResult] = useState(0);
  console.log('rendering', result);

    return (
      <View style={styles.container}>
        <StatusBar style="auto" />
        <Text style={styles.text}>{result}</Text>
        <Button
          title="+"
          onPress={ () => {
            setResult((prevState) =>{
              console.log("prevState 1 :", prevState);
              return prevState + 1;
            });
          }}
        />
      </View>
    );
  };

  const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    },
    text:{
      fontSize: 60,
      fontWeight: '700',
      color: 'black'
    },
  });

export default App;

 

[+] 버튼을 누르면 1씩 증가하여 리렌더링 되는 것을 확인 할 수 있습니다.

화면 리렌더링 결과