[리액트] 컴포넌트 - 프로퍼티 / 상태관리 (setState / forceUpdate)

 

 

컴포넌트에 데이터를 전달하는 프로퍼티

- 프로퍼티 기초 알아보기

import React from 'react';
import PropTypes from 'prop-types';
 
class PropsComponent extends React.Component {
  render() {
    return <div className="message-container">{this.props.name}</div>;
  }
}
 
// 자료형을 선언하는 예제
PropsComponent.propTypes = {
  name: PropTypes.string,
};
 
export default PropsComponent;

import './App.css';
import { Component } from 'react';
import PropsComponent from './03/PropsComponent';
 
class App extends Component{
  render(){
    return(
      
      <PropsComponent name="두잇 리액트"/>
    )
  }
}
 
export default App;

 

- 다양한 프로퍼티 사용하기

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class ChildComponent extends Component {
  render() {
    const { boolValue, numValue, arrayValue, objValue, nodeValue, funcValue } = this.props;
 
    return (
      <div>
        <span>불리언 값 : {boolValue}</span>
        <span>숫자값 : {numValue}</span>
        <span>배열값 : {arrayValue}</span>
        <span>객체값 : {String(objValue)}</span>
        <span>노드값 : {nodeValue}</span>
        <span>함수값 : {String(funcValue)}</span>
      </div>
    );
  }
}
ChildComponent.propTypes = {
  boolValue: PropTypes.bool,
  numValue: propTypes.number,
  arrayValue: PropTypes.arrayOf(PropTypes.number),
  objValue: PropTypes.object,
  nodeValue: PropTypes.node,
  funcValue: PropTypes.func,
};
 
export default ChildComponent;

import './App.css';
import { Component } from 'react';
import ChildComponent from './03/ChildComponent';
 
class App extends Component{
  render(){
    return(
      <ChildComponent
        boolValue={true}
        numValue={1}
        arrayValue={[1,2,3]}
        objValue={{ name : '제목', age : 30}}
        nodeValue={<h1>노드</h1>}
        funcValue={()=> { console.log('메시지'); }}
        />
    )
  }
}
 
export default App;

결과값은 같지만 개발자간의 실수를 줄이기 위해 변수에 객체를 담아 전달하는 아랫 방식을 선호한다.

import './App.css';
import { Component } from 'react';
import ChildComponent from './03/ChildComponent';
 
class App extends Component{
  render(){
    const array=[1,2,3];
    const obj = {name : '제목', age:30};
    const node = <h1>노드</h1>;
    const func = () => { console.log('메시지'); };
    return(
      <ChildComponent
        boolValue={true}
        numValue={1}
        arrayValue={array}
        objValue={obj}
        nodeValue={node}
        funcValue={func}
        />
    )
  }
}
 
export default App;

 

- 불리언 프로퍼티 사용하기

=> 실무에서 자주 사용하므로 알아두기

import React, { Component } from 'react';
 
class BooleanComponent extends Component {
  render() {
    const message = this.props.bored ? '놀러가자' : '하던 일 열심히 마무리하기';
    return <div className="message-container">{message}</div>;
  }
}
 
export default BooleanComponent;

import { Component } from 'react';
import BooleanComponent from './03/BooleanComponent';
 
class App extends Component {
  render() {
    return (
      <div>
        <div>
          <b>지루할 때 :</b>
          <BooleanComponent bored />
        </div>
        <div>
          <b>즐거울 때 :</b>
          <BooleanComponent />
        </div>
      </div>
    );
  }
}
 
export default App;

 

- 객체형 / 필수 프로퍼티 사용하기

 

import React from 'react';
import PropTypes from 'prop-types';
 
class ChildComponent2 extends React.Component {
  render() {
    const { objValue, requiredStringValue } = this.props;
 
    return (
      <div>
        <div>객체값: {String(Object.entries(objValue))}</div>
        <div>필수값: {requiredStringValue}</div>
      </div>
    );
  }
}
 
ChildComponent2.propTypes = {
  // 객체형 프로퍼티
  objValue: PropTypes.shape({
    name: PropTypes.string,
    age: PropTypes.number,
  }),
  // 필수 프로퍼티
  requiredStringValue: PropTypes.string.isRequired,
};
 
export default ChildComponent2;

import { Component } from 'react';
import BooleanComponent from './03/BooleanComponent';
import ChildComponent2 from './03/ChildComponent2';
 
class App extends Component {
  render() {
    return (
      <div>
        <ChildComponent2 objValue={{ age: '20살' }} />
      </div>
    );
  }
}
 
export default App;

age에 number가 아닌 String을 대입한 에러1과, 필수 프로퍼티로 지정한 RequiredStringVaule에 값이 전달되지 않아서 에러가 나게 됐다.

import { Component } from 'react';
import BooleanComponent from './03/BooleanComponent';
import ChildComponent2 from './03/ChildComponent2';
 
class App extends Component {
  render() {
    return (
      <div>
        <ChildComponent2 objValue={{ age: 20 }} requiredStringValue="문자" />
      </div>
    );
  }
}
 
export default App;

수정해주니까 에러 사라짐~

 

 

컴포넌트 상태 관리하기

 

1. state로 상태관리하기.

import React from "react";
 
class StateExample extends React.Component {
  constructor(props) {
    super(props);
    // 상태 정의
    this.state = {
      loading: true,
      formData: "no data",
    };
    // 이후 콜백 함수를 다룰때 bind를 선언하는 부분에 대해 다룹니다
    this.handleData = this.handleData.bind(this);
    // 생성 후 4초 후에 handleData를 호출합니다.
    setTimeout(this.handleData, 4000);
  }
  handleData() {
    const data = "new data";
    const { formData } = this.state;
    // 상태 변경
    this.setState({
      loading: false,
      formData: data + formData,
    });
    // this.state.loading 은 현재 true 입니다.
    // 이후 호출될 출력함수에서의 this.state.loading은 false입니다.
  }
  // 다음과 같이 setState함수를 사용할 수 있습니다.
  // handleData(data) {
  //   this.setState(function(prevState) {
  //     const newState = {
  //       loading : false,
  //       formData: data + prevState.formData,
  //     };
  //     return newState;
  //   });
  // }
  render() {
    return (
      <div>
        {/* 상태 데이터는 this.state로 접근 가능합니다. */}
        <span>로딩중: {String(this.state.loading)}</span>
        <span>결과: {this.state.formData}</span>
      </div>
    );
  }
}
 
export default StateExample;

왼쪽 => 4초뒤 => 오른쪽

 

state를 사용할 떄 주의점

: 생성자에서 반드시 초기화 해야 한다.

: state값을 변경할 떄는 setState()함수(상태관리함수)를 반드시 사용해야함

: setState()함수는 비동기로 처리되며, setState() 코드 이후로 연결된 함수들의 실행이 완료된 시점에

  화면 동기화 과정을 거친다.

 

 

2. 클래스 인스턴스 변수와 forceUpdate()함수로 State관리하기

import React from "react";
 
class ForceUpdateExample extends React.Component {
  constructor(props) {
    super(props);
    //state 정의
    this.loading = true;
    this.formData = "no data";
 
    //이후 콜백 함수를 다룰 때 bind를 선언하는 부분에 대해 다룹니다
    this.handleData = this.handleData.bind(this);
    // 4초후 호출
    setTimeout(this.handleData, 4000);
  }
  handleData() {
    const data = "new data, ";
    //state 변경
    this.loading = false;
    this.formData = data + this.formData;
    // 컴포넌트 내장 함수 forceUpdate()를 호출하여 강제로 화면을 새로고침 한다.
    this.forceUpdate;
  }
  render() {
    return (
      <div>
        {/* 상태 데이터는 this.state로 접근 가능합니다. */}
        <span>로딩중: {String(this.state.loading)}</span>
        <span>결과: {this.state.formData}</span>
      </div>
    );
  }
}
 
export default ForceUpdateExample;
C;

  

 

위에 것과 결과는 같지만 리액트 성능에 제약이 있으므로, 매번 새롭게 화면을 출력해야 되는 경우가 아니라면

가급적 사용하지 않기를 권한다고 한다