Props, State

React with Typescript 세미나 강의를 듣고 정리하며 공유한다.

React 에는 

부모 컴포넌트로부터 데이터를 받을 수 있는 props와 

component안에서 사용할 수 있는 state가 있다.

props와 state의 정의 및 특징

(출처: React with Typescript 세미나 강의)

다음은 props와 state 예제이다.

<!--props 데이터를 보내려면 이렇게 태그에 props name에 데이터를 전송해야 한다.-->
<App name="Markclear" company="Props"/>

// App tsx

// React typescript이기 때문에 Props인터페이스와  State를 만들어 줘야한다.
export interface Props {
    name: string;
    company?: string;
  }
  
  interface State {
    age: number;
  }
  
  class App extends React.Component<Props, State> {

    static defaultProps = {
      company: 'Studio XID'. // 초기값을 이렇게 줬지만 App태그에서 props를 지정해줬기 때문에 사용 x 
    }

    constructor(props: Props) {
      super(props);
      // state의 초기값을 지정 했으며 1초마다 1증가
      this.state = {   
        age: 35
      };
      setInterval(() => {
        this.setState({
          age: this.state.age + 1
        });
      }, 2000);
      // 밑의 _rollback() 메서드 호출
      this._rollback = this._rollback.bind(this);
    }
  
    public render() {
      return (
        <div className="App">
          // Markclear, Props 35(1씩증가)
          {this.props.name}, {this.props.company} {this.state.age}
          // _rollback 호출
          <button onClick={this._rollback}>회춘<//button>   

          <StatelessComponent name="안냥"> 미나머로 <//StatelessComponent>
        <//div>
      );
    }

    private _rollback(): void{
      this.setState({
        age: 25
      });
    }
  
  }   

  // React.SFC또한 리엑트 컴포넌트를 표현하는 방법. 다만 다른점은 React.SFC는 state를 사용하지 않고
  // 컴포너트의 리턴 타입을 Props 타입과 함께 설정한다. 
  const StatelessComponent: React.SFC<Props> = ({name, company = "Home2", children}) => {
    return (
      <h2>{name},{company},{children}<//h2> // LifeCycle의 제한이 있다. 
    );
  }
  
 export default App;

결과화면

state를 관리하기 위해서는 예제나 강의에서 setState를 사용해야 한다고 한다.

하지만 이글 을 읽어보고 setState를 사용하는 대신에 mobX나 redux를 사용해야 하는 이유를 알면 도움이 될꺼같다.

그리고 redux와 mobx 는 둘다 데이터 관리 라이브러리, 하지만 이 글을 읽다보면 나처럼 타입스크립트를 사용하는 환경에서는 mobX를 사용하는 것을 추천한다.