props / state

props

• 컴포넌트 속성을 설정할때 사용하는 요소
• { }로 감싸서 사용.

import React from 'react';

const MyComponent = props => {
  return <div> 오늘의 메뉴는 {props.menu}입니다.</div>
};

export default MyComponent;

// 부모컴포넌트에서 props값 지정

import React from 'react';

const App = () => {
  return <MyComponent menu='삼계탕' />;
};

export default App;

위 내용처럼 작성하면 "오늘의 메뉴는 삼계탕입니다." 라는 내용으로 출력된다

props 기본값 설정하기 : defaultProps

위 코드에서 menu='삼계탕'을 지우면 화면에는 "오늘의 메뉴는 입니다." 라는 내용만 출력될 것이다.
그래서 props 값을 지정하지 않았을 때 기본값을 생성할 것이다.

import React from 'react';

const MyComponent = props => {
  return <div>오늘의 메뉴는 {props.menu}입니다.</div>;
};

MyComponent.defaultProps={
  menu: '쌀밥'
};

export default MyComponenet;

위 코드처럼 'defaultProps' 를 추가하면 부모컴포넌트에서 menu에 내용을 입력하지 않으면
"오늘의 메뉴는 쌀밥입니다."라는 내용으로 출력된다.

비구조화 할당 문법을 통한 props 값 추출

현재까지는 props 값을 추출할때는 props.menu 와 같이 앞에 props를 붙여주었다.
이를 비구조화 할당 문법을 통해 좀 더 편하게 사용할 수 있다.

import React from 'react';

const MyComponent = props => {
  const { menu, submenu } = props;
  return (
    <div>
      오늘의 메뉴는{menu}입니다. <br />
      오늘의 반찬은{submenu}입니다.
    </div>
};

MyComponent.defaultProps = {
  menu = '쌀밥'
};

export default MyComponent;

//또 다른 형태
import React from 'react';

const MyComponent = { menu, submenu } => {
  return (
    <div>
      오늘의 메뉴는{menu}입니다. <br />
      오늘의 반찬은{submenu}입니다.
    </div>
};

MyComponent.defaultProps = {
  menu = '쌀밥'
};

export default MyComponent;

위 처럼 코딩을 하면 좀 더 짧고 편하게 코딩을 할 수 있다.

isRequired를 사용하여 필수 propTypes 설정

isRequired를 사용하여 props를 지정하지 않았을때 경고메세지를 띄워주는 작업을 하자.

import React from 'react';

const MyComponent = { menu, submenu } => {
  return (
    <div>
      오늘의 메뉴는{menu}입니다. <br />
      오늘의 반찬은{submenu}입니다.
    </div>
};

MyComponent.defaultProps = {
  menu = '쌀밥'
};

MyComponent.propTypes = {
  menu : PropTypes.string,
  submenu : PropTypes.string.isRequired
};

export default MyComponent;

위 처럼 코딩을 했을때 submenu에 내용을 입력하지 않으면 콘솔에 입력하라는 경고메세지가 출력이 된다.

state

• React에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미한다.
• props는 부모컴포넌트에서 값을 설정하고 자신은 그 내용을 출력하는 용도로 사용. 그리고 props를 바꾸려면 부모컴포넌트에서 바꿔 줘야 한다.

클래스형 컴포넌트의 state

import React, {Component} from 'react';

class MyComponent extends Component {
  state = {
    number: 0,
    fixedNumber: 0
  };
  render () {
    const { number, fixedNumber } = this.state;
    return (
        <div>
          <h2>{number}</h2>
            <h2>{fixedNumber}</h2>
          <button
            onClick={() => {
              this.setState({number: number+1});
            }}
            >
            +1
          </button>
        </div>
      );
  }
}

export default MyComponent;

함수형 컴포넌트에서 useState 사용하기

import React, {useState} from 'react';

const Glory = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요');
  const onClickLeave = () => setMessage('안녕하가세요');

  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h2>{message}</h2>
    </div>
  ); 
};

export default Glory;

위 내용처럼 코딩하면 '입장'버튼을 누르면 "안녕하세요", '퇴장'버튼을 누르면 "안녕히가세요"라는 메세지가 출력된다.

state 사용 시 주의사항

• state 값을 바꿀때는 setState 혹은 useState를 통해 바꾸어 줘야 한다.