React Native 개념잡기 Learn the Basics #4

Learn the Basics #3에 이어서...

State

Unlike props that are read-only and should not be modified, the state allows React components to change their output over time in response to user actions, network responses and anything else.

 

읽기 전용이므로 수정해서는 안 되는 props와 달리 state는 Responent 구성 요소가 사용자 작업, 네트워크 응답 등에 대응하여 시간이 지남에 따라 출력을 변경할 수 있도록 허용합니다.

 

What's the difference between state and props in React?

React에서의 state와 props의 차이점은??

 

In a React component, the props are the variables that we pass from a parent component to a child component. Similarly, the state are also variables, with the difference that they are not passed as parameters, but rather that the component initializes and manages them internally.

리액트 컴포넌트에서 props은 상위 컴포넌트에서 하위 컴포넌트로 전달되는 변수입니다. 마찬가지로 state도 변수이며 매개 변수로 전달되지 않고 구성 요소가 내부적으로 초기화하고 관리한다는 차이점이 있습니다.

 

ex)

// ReactJS Counter Example using Hooks!

import React, { useState } from 'react';



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

  return (
    <div className="container">
      <p>You clicked {count} times</p>
      <button
        onClick={() => setCount(count + 1)}>
        Click me!
      </button>
    </div>
  );
};


// CSS
.container {
  display: flex;
  justify-content: center;
  align-items: center;
}

// React Native Counter Example using Hooks!

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

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

  return (
    <View style={styles.container}>
      <Text>You clicked {count} times</Text>
      <Button
        onPress={() => setCount(count + 1)}
        title="Click me!"
      />
    </View>
  );
};

// React Native Styles
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

As shown above, there is no difference in handling the state between React and React Native. You can use the state of your components both in classes and in functional components using hooks!

 

위와 같이 React와 React Native의 상태 처리에는 차이가 없습니다. 후크를 사용하여 클래스 및 기능 구성요소에서 구성요소의 상태를 모두 사용할 수 있습니다!