Eojin Han

앞서 살펴본 Props에서 Components가 어떻게 렌더링 될 지 별도의 옵션, 값을 설정하는 것을 보고 함수의 인자라는 생각이 들었을 수 있다.

Props를 함수의 인자로 비유하자면, State는 마치 personal data storage로 볼 수 있다.

State는 시간이 지남에 따라 변경되거나 사용자 상호작용에서 발생하는 데이터를 처리하는 데 유용하다.

Props vs State 한방정리


일반적으로
 
-렌더링할 때 Component를 설정하려면 Props 사용.
-시간 경과 혹은 상호작용에 따라 값이 변경될 것으로 예상되는 모든 Component Data를 추적하려면 State 사용

State 예시

렌더링 할 때 Component의 값을 설정하려고 name은 props를 통해 전달하여 값을 설정하였음.

Cat Component가 배가고픈지에 대한 상태(State)(시간이 지남에 따라 바뀔 값)는 State로 설정하였다.

Component에 State를 설정하려면 리액트의 Hook 중 "useState" Hook을 통해 설정한다.

useState는 기능 구성요소에 State를 추가할 수 있는 Hook이다.

React의 다양한 Hook 들은 다음 주소를 참조 : https://reactjs.org/docs/hooks-intro.html


import React, { useState } from "react"; //useState는 React의 Hook이므로 import 해서 씀.
import { Button, Text, View } from "react-native";

const Cat = (props) => {
	
	//Cat Component에 State 설정 (초기값 - true)
	//형식 : const [getter, setter] = useState(초기값);
  const [isHungry, setIsHungry] = useState(true); //isHungry State 변수 하나 생성 (getter, setter 세트임)

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false);
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" /> {//이건 Props로 전달하는 것}
      <Cat name="Spot" /> {//이건 Props로 전달하는 것}
    </>
  );
}

export default Cafe;

State 설정 : const [getter, setter] = useState(초기값);

State 타입

strings, numbers, booleans, arrays, objects 다 가능하다.

시간과 관련된 State를 예로들면 아래와 같다.


//timesPetted라는 State변수 하나 생성하고, 초기값을 0으로 설정.
const [timesPetted, setTimesPetted] = useState(0);

State값이 바뀌면 해당 Component는 re-render 된다. *****

State의 중요한 특성 중 하나다.

State의 값이 바뀌면, 해당 State와 관련된 Component는 re-render된다.


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

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <View>
      <Text>
        I am {props.name}, and I am {isHungry ? "hungry" : "full"}!
      </Text>
      <Button
        onPress={() => {
          setIsHungry(false); //버튼이 눌리면 setter함수가 호출되면서 State값을 바꾼다
															//Button Component가 State에 영향을 받으므로 re-render됨.
        }}
        disabled={!isHungry}
        title={isHungry ? "Pour me some milk, please!" : "Thank you!"}
      />
    </View>
  );
}

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
}

export default Cafe;

버튼을 누르면 isHungry State가 setIsHungry(setter함수)함수에 의해 State가 변하고

변화된 State값에 따라 Button Component가 re-render되어 버튼이 비활성화, 텍스트변화가 반영된다.