[0805] React-Native 강의 정리

Section 6 : State Management in React Components

• Props : 부모 컴포넌트에서 자식으로 데이터를 넘길 수 있는 시스템
• State : 하나의 데이터를 추적하는(track) 시스템. 데이터가 변경되면 앱에서 다시 'render'하게 됨.

→ 리액트는 자동적으로 변수의 변화를 감지하고 반영하지 않음.

→ 따라서 변화를 감지하고 이 변화를 실제로 반영시키기 위해 state를 사용함.

 

• State 사용에서 생각할 점
  1. 어떤 데이터가 변경될 것인가?
  2. 데이터의 타입은 무엇인가?
  3. 해당 데이터의 초기 값은 무엇인가?

//state를 사용하기 위해서는 react 라이브러리에서 가져옴.
import React, { useState } from 'react';
import { Text, StyleSheet, Button, View } from 'react-native';

const Screen = () => {
//counter라는 변수의 변화를 감지하기 위해 다음 구문 사용
//useState(0) : counter 변수의 초기값을 0으로 설정.
//setCounter : counter라는 변수의 값을 설정할 때 사용할 함수
//setCounter를 사용하지 않고 변수를 변경할 경우, 리액트는 이 변화를 자동적으로 감지하지 않음
// -> 따라서 setCounter를 사용하여 변화를 자동적으로 감지하게끔 함.

    const [counter, setCounter] = useState(0); //구조 분해 할당이 쓰이고 있음

    return (
        <View>
            <Button title="Increase" onPress={() => {
                counter++;
                console.log(counter);
            }}/>
            <Button title="Decrease" onPress={() => {
                counter--;
                console.log(counter);
            }}/>
            <Text>{counter}</Text>
        </View>
    );
};

 

※ 구조 분해 할당(Array Destructuring)
: 구조화된 배열 or 객체를 비구조화(Destructuring)하여 개별적인 변수에 할당하는 것. 배열이나 객체에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 사용.

 

https://poiemaweb.com/es6-destructuring

Destructuring | PoiemaWeb

 

• State 사용에 대한 이모저모
  1. state 변수는 '직접' 변경하지 말 것. 리액트에서 변화를 감지할 수 없기 때문. state 변수를 바꿀 때는 'setter' 함수를 이용할 것.
  2. state 변수의 이름은 원하는 것으로 지어도 됨.
  3. 어떤 타입의 변수든 변화를 추적할 수 있음. 배열도 ok.
  4. 어떤 컴포넌트가 렌더되면, 그 자식 컴포넌트들도 함께 렌더됨.
  5. state 또한 자식 컴포넌트로 넘겨질 수 있음. 이렇게 되면 props 마냥 쓰이게 됨.
  6. 현재 사용해본 state는 function-based state.
  
  
• 리액트에서의 색상 정보는 RGB 형태로 설정하는 것이 가능.

const Screen = () => {
    return (
        <View>
            <View style={{ height: 100, width: 100, backgroundColor: 'rgb(0, 255, 0)' }}/>
        </View>
    );
}

 

※ 전개 연산자 (...)

[...colors, randomRgb()]
//colors 배열 속 원소들을 복사해서, 그 원소들을 갖는 새로운 배열을 만들어냄.
//그리고 뒤에 있는 randomRgb() 로 새로운 원소를 넣음.

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax

전개 구문 - JavaScript | MDN