3장 컴포넌트

3.3 props와 state

*** props 부분 이해가 잘 안 된 채로 작성해서 다시 이해하고 정리할 예정이다...

props

• props는 poperties의 줄인 표현으로, 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값을 말한다
• 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서는 해당 props를 사용할 수 있지만 변경하는 것은 불가능하다
  • 변경해야하는 경우 부모 컴포넌트에서 변경해야 한다

<Button title="Button" />

• 위 코드처럼 Button 컴포넌트에 title 속성을 지정하면, Button 컴포넌트의 props로 title이 전달됨

부모 컴포넌트에서 자식 컴포넌트를 사용하면서 속성으로 props를 전달하는 방법

src/components/MyButton.js

import React from "react"; // 리액트 호출
import { TouchableOpacity, Text } from "react-native"; // 리액트 네이티브에서 제공하는 컴포넌트 추가

const MyButton = props => {
    console.log(props);
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>{props.title}</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

src/App.js

import React from 'react';
import { Text, View } from 'react-native';
import MyButton from './components/MyButton';

const App = () => {
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text style={{ fontSize:30, marginBottom:10 }}>Props</Text>
      <MyButton title="Button" />
    </View>
  );
}

export default App;

실행 결과

컴포넌트의 태그 사이에 값을 입력해서 props를 전달하는 방법

• 태그 사이의 값은 자식 컴포넌트의 props에 children으로 전달된다
• 이때 props에 children이 있다면 title보다 우선시되도록 작성한다
  src/components/MyButton.js

const MyButton = props => {
    console.log(props);
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>{props.children || props.title}</Text>
        </TouchableOpacity>
    );
};

export default MyButton;

src/App.js

const App = () => {
  return (
    <View
     style={{
       flex:1,
       backgroundColor: '#fff',
       alignItems: 'center',
       justifyContent: 'center',
     }}
    >
      <Text style={{ fontSize:30, marginBottom:10 }}>Props</Text>
      <MyButton title="Button" />
      <MyButton title="Button">Children Props</MyButton>
    </View>
  );
}

export default App;

실행 결과

defaultProps

src/components/MyButton.js에 다음 코드를 추가해줌으로써 default prop을 지정해준다

MyButton.defaultProps = {
    title: "Btn"
};

src/App.js

<MyButton title="Button" />
<MyButton title="Button">Children Props</MyButton>
<MyButton />

실행 결과

propTypes

• PropTypes를 사용해서 잘못된 props가 전달되었다는 것을 경고 메시지를 알릴 수 있다
• PropTypes를 사용하려면 라이브러리를 추가로 설치해야 한다

npm install prop-types

• PropTypes를 이용하면 컴포넌트에서 전달받아야 하는 props의 타입과 필수 여부를 지정할 수 있다
• propts 타입 지정
  src/components/MyButton.js

import PropTypes from 'prop-types';

const MyButton = props => {
    console.log(props);
    return (
        <TouchableOpacity
            style={{ 
            backgroundColor: '#3498db',
            padding: 16,
            margin: 10,
            borderRadius: 8,
            }}
            onPress={() => alert('Click!!!')}
        >
            <Text style={{ color: 'white', fontSize: 24}}>{props.children || props.title}</Text>
        </TouchableOpacity>
    );
};

MyButton.PropTypes = {
    title: PropTypes.number,
}

MyButton.defaultProps = {
    title: "Btn"
};

src/components/MyButton.js에 다음 코드를 추가한다

import PropTypes from 'prop-types';

MyButton.PropTypes = {
    title: PropTypes.number,
}

MyButton.defaultProps = {
    title: "Btn"
};

state

• props는 부모 컴포넌트에서 받은 값으로 변경할 수 없는 반면,
• state는 컴포넌트 내부에서 생성되고 값을 변경할 수 있고, 이를 이용해 컴포넌트 상태를 관리한다
• 상태state란 컴포넌트에서 변화할 수 있는 값을 나타내며, 상태가 변하면 컴포넌트는 리렌더링re-rendering된다

useState

• 리액트 Hooks 중 useState는 함수형 컴포넌트에서 상태를 관리할 수 있도록 해준다
• useState는 상태를 관리하는 변수와 그 변수를 변경할 수 있는 세터setter 함수를 배열로 반환한다
• useState 함수에서 반환한 세터함수를 이용해서 상태 변수를 변경한다
• useState 함수를 호출할 때 파라미터에 생성되는 상태의 초기값을 지정한다
  • 초기값을 전달하지 않으면 undefined로 설정되어 에러가 발생할 수 있으므로 항상 초기값을 설정하는 것이 좋다
• 예시코드

const [state, setState] = useState(initialState);