props

리액트 컴포넌트에서 다루는 데이터이자, 가장 중요한 props를 정리하겠다. props는 부모 컴포넌트가 자식 컴포넌트에게 주는 값을 의미한다. 자식은 이를 받아오기만 하고 수정할 수 없다. 

 

클래스형 컴포넌트 생성

import React, { Component, Fragment } from 'react';
import './App.css';

class App extends Component {
  sayResult(name) {
    if (name === 'c') return <div>'한 글자'</div>;
    if (name === 'cs') return <div>'두 글자'</div>;
    if (name === 'csd') return <div>'맞음'</div>;
  }

  render() {
    const name = 'csd';

    return (
      <Fragment>
        {/* 왜냐하면? */}
        <div className="App">
          <h1>리액트를 처음 공부하는 백엔드 : {name}</h1>
          <div>{this.sayResult(name)}</div>
        </div>
      </Fragment>
    );
  }
}

export default App;

이 부분을 컴포넌트화시킨다고 생각해보자. 일단, AppComponent라는 파일을 하나 생성해준다.

 

import React, { Component, Fragment } from 'react';

class AppComponent extends Component {
  render() {
    return (
      <Fragment>
        <div className="App">
          <h1>
            리액트를 처음 공부하는 백엔드 : <b>{this.props.name}</b>
          </h1>
        </div>
      </Fragment>
    );
  }
}

export default AppComponent;

그 다음 this. 키워드를 사용해서 받아온 props 값을 바인딩해준다. 

 

import React, { Component, Fragment } from 'react';
import './App.css';
import AppComponent from './AppComponent';

class App extends Component {
  render() {
    return <AppComponent name="csd" />;
  }
}

export default App;

그리고 AppComponent를 호출하여 name에 csd라는 스트링을 넣어준다.

 

그 결과를 확인해보면 위와 같은 것을 알 수 있다.

 

import React, { Component, Fragment } from 'react';
import './App.css';
import AppComponent from './AppComponent';

class App extends Component {
  render() {
    return <AppComponent />;
  }
}

export default App;

근데 이렇게 props를 까먹고 안넣어 줄 때가 있는데 이를 대비해 defaultProps라는 개념을 통해서 미리 props에 값을 넣어줄 수도 있다.

 

import React, { Component, Fragment } from 'react';

class AppComponent extends Component {
  static defaultProps = {
    name: 'csd'
  };

  render() {
    return (
      <Fragment>
        <div className="App">
          <h1>
            리액트를 처음 공부하는 백엔드 : <b>{this.props.name}</b>
          </h1>
        </div>
      </Fragment>
    );
  }
}

export default AppComponent;

이런 식으로 넣어주거나

 

import React, { Component, Fragment } from 'react';

class AppComponent extends Component {
  render() {
    return (
      <Fragment>
        <div className="App">
          <h1>
            리액트를 처음 공부하는 백엔드 : <b>{this.props.name}</b>
          </h1>
        </div>
      </Fragment>
    );
  }
}

AppComponent.defaultProps = {
  name: 'csd'
};

export default AppComponent;

이런 식으로 넣어주면 된다. 둘 다 static한 의미를 가지기에 좀 더 최신 버전의 자바스크립트를 활용한다면 첫번째 방법으로 사용하면 되겠다.

 

함수형 컴포넌트 생성

위에서는 여태까지 Component 클래스를 상속받아 사용해와서 클래스형 컴포넌트를 생성했다. 이번에는 좀 더 간단하게 컴포넌트를 작성할 수 있는 함수형 컴포넌트를 사용해보려고 한다.

 

import React, { Fragment } from 'react';

const AppComponent = ({ name }) => {
  return (
    <Fragment>
      <div className="App">
        <h1>
          리액트를 처음 공부하는 백엔드 : <b>{name}</b>
        </h1>
      </div>
    </Fragment>
  );
};

export default AppComponent;

오히려 더 간단해졌고 비구조화 할당을 통해 선언하던 Component가 없어도 컴포넌트를 생성할 수 있었다. 이를 사용하는 경우는 메모리 자원을 덜 사용하고 이 정도의 차이이기에 무수히 많이 렌더링하는 게 아니면 클래스형 컴포넌트와는 큰 차이가 없다.