Component && props / state

Contents

1. 클래스형 컴포넌트
2. 함수형 컴포넌트
3. 클래스형 컴포넌트에서 props 사용하기
4. 함수형 컴포넌트에서 props 사용하기
5. 클래스형 컴포넌트에서 state 사용하기
6. 함수형 컴포넌트에서 state 사용하기

# 01 - 클래스형 컴포넌트

클래스형 컴포넌트를 사용하기 위해서는 React.Component 를 상속받아야 합니다.

import React, { Component } from 'react';
class Welcome Extends Component {
  render () {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

export default Welcome;

클래스형 컴포넌트는 render 함수가 꼭 있어야 합니다.
함수형 컴포넌트와는 달리 클래스형 컴포넌트를 사용하면
state 를 사용할 수 있고 Lifecycle 를 사용할 수 있습니다.

# 02 - 함수형 컴포넌트

함수형 컴포넌트는 다음과 같이 사용할 수 있습니다.

import React from 'react';

const Welcome = (props) => {
  return <h1>Hello, {props.name}</h1>;
};

export default Welcome;

함수형 컴포넌트는 render 함수를 따로 호출할 필요가 없습니다.

한줄 이상의 JSX 코드를 return할 때에는 클래스 / 함수형 컴포넌트 모두
return() 을 사용하면 됩니다.

컴포넌트에 여러 요소가 존재할 경우 [return()을 사용할 경우] 반드시 부모 컨테이너로 감싸줘야 합니다.

# 03 - 클래스형 컴포넌트에서 props 사용하기

props 는 컴포넌트 속성을 설정할 때 사용하는 요소입니다.
props 는 부모 컴포넌트에서 값을 지정해 줄 수 있습니다.
또한 props 는 컴포넌트 내부에서 값을 변경하지 못합니다.

클래스형 컴포넌트에서 props 는 render 함수에서 사용할 수 있습니다.

// Welcome.js
import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    const { name, age } = this.props;
    return(
      <div>
        Welcome, {name} / {age}. <br />
      </div>
    );
  }
}

export default Welcome;

// App.js
import React, { Component } from 'react';
import Welcome from './Welcome';

class App extends Component {
  render () {
    return <Welcome name="Lia" age={999} />;
  }
}

export default App;

App.js 와 같은 부모 컴포넌트에서 props 값을 사용할 수 있습니다.
props 값을 지정해 주지 않으면 Welcome 컴포넌트는 이름과 나이를 출력할 수 없습니다.
이 때에 props 의 값을 지정해 주지 않아도 기본 props 의 값을 사용 할 수 있습니다.

props 의 기본값은 defaultProps 를 사용하여 지정할 수 있습니다.

(...)

Welcome.defaultProps = {
  name: 'default name',
  age: 1,
};

(...)

defaultProps 는 클래스 / 함수형 컴포넌트 모두 동일한 방식으로 사용할 수 있습니다.

props 중에는 컴포넌트 태그 사이의 내용을 보여주는 props 가 있습니다.
props.children 이 컴포넌트 태그 사이의 내용을 보여주는 props 입니다.

// App.js
import React, { Component } from 'react';
import Welcome from './Welcome';

class App extends Component {
  render () {
    return <Welcome name="Lia" age={999}>안녕하세요</Welcome>;
  }
}

export default App;

// Welcome.js
import React, { Component } from 'react';

class Welcome extends Component {
  render() {
    const { name, age, children } = this.props;
    return(
      <div>
        Welcome, {name} / {age}. <br />
        {children}  // 안녕하세요
      </div>
    );
  }
}

export default Welcome;

리액트에서는 props 의 타입을 확인할 수 있습니다.
Flow 혹은 TypeScript 와 같은 JavaScript Extensions 을 사용할 수 있습니다.
위와 같은 Extensions 을 사용하지 않아도 리액트에서는
prop-types 라이브러리를 사용할 수 있습니다.

React v15.5 부터는 다른 패키지로 이동하여 prop-types 라이브러리를 사용해야 합니다.
yarn add prop-types 로 설치해야 합니다.

prop-types 는 다음과 같이 사용할 수 있습니다.

(...)

import PropTypes from 'prop-types';

(...)

Welcome.propTypes = {
  name: PropTypes.string,
  age: PropTypes.number,
};

(...)

prop-types 의 data type은 사이트 에서 확인할 수 있습니다.
prop-types 또한 클래스 / 함수형 컴포넌트에서 모두 동일한 방법으로 사용할 수 있습니다.

# 04 - 함수형 컴포넌트에서 props 사용하기

함수형 컴포넌트는 함수의 파라미터로 props 값을 받아올 수 있습니다.

// Hello.js
import React from 'react';

const Hello = (props) => {
  return <h1>Hello, {props.name}!!<h1>;
};

export default Hello;

부모 컴포넌트에서 props 값을 지정해 주는것은 클래스형 컴포넌트와 같습니다.

함수형 컴포넌트도 클래스형 컴포넌트와 마찬가지로 props.children 으로
컴포넌트 태그 사이에 있는 값을 확인할 수 있습니다.

// Hello.js
import React from 'react';

const Hello = (props) => {
  return (
    <div>
      Hello, {name} / {age} <br />
      {props.children}
    </div>
  );
};

defaultProps 와 propTypes 사용법은 클래스형 컴포넌트와 같습니다.

# 05 - 클래스형 컴포넌트에서 state 사용하기

state 는 props 와 달리 컴포넌트 내부에서 변경 가능한 값입니다.
클래스형 컴포넌트에서 state 를 설정할 때에는 크게 두가지가 있습니다.
생성자를 이용하는 방법과 이용하지 않는 방법이 있습니다.

생성자를 이용하여 state 를 설정하는 방법은 다음과 같습니다.

(...)

constructor(props) {
  super(props);
  this.state = {
    name: 'Lia',
    age: 999,
  };
}

(...)

여기서 주의해야 할 점은 클래스형 컴포넌트는 항상 props 로
기본 constructor 를 호출해야 합니다.

생성자를 사용하지 않고 state 를 설정하는 방법은 다음과 같습니다.

(...)

class MyComponent extends Component {
  state = {
    name: 'Lia',
    age: 999,
  };
  
  (...)
}

(...)

위와 같이 설정한 state 는 구조 분해 할당(비구조화 할당)을 이용하여
사용할 수 있습니다.

(...)

constructor(props) {
  super(props);
  this.state = {
    name: 'Lia',
    age: 999,
  };
}

render() {
  const { name, age } = this.state;
  return(
    <div>
      {name}
      {age}
    </div>
  );
}

(...)

state 를 사용할 때에도 주의해야 할 것이 있습니다. state 값을 변경할 때에는 직접적으로 접근하면 안됩니다. 함수형 컴포넌트 같은 경우 setState 를 이용하여 간접적으로 접근해야 합니다.

state 값을 변경할 때에는 setState 를 사용하게 됩니다. setState 의 형태는 다음과 같습니다.
setState(updater, [callback])

setState 함수의 첫번째 인자인 updater 는 다음과 같은 형태를 가지는 함수입니다.
(state, props) => stateChange

state 는 기존 state 의 값이고 props 는 현재 컴포넌트가 가지고 있는 props 입니다.
여기서 state 와 props 를 직접 변경하려고 하면 안됩니다.

this.setState((prevState, props) => {
  return { age: prevState.age + props.step };
});

다음 state 값이 이전 state 값에 기반한다면 위와 같이 사용하는 것이 좋습니다.

setState 에 첫번째 인자로 객체를 전달해 줄 수 있습니다.

this.setState({ name: 'Name is changed!!' });

그리고 두 번째 인자인 callback 함수는 state 값을 업데이트 한 후에 실행됩니다.

# 06 - 함수형 컴포넌트에서 state 사용하기

React v16.8 부터 Hook Api 를 이용하여 함수형 컴포넌트에서 state 를 사용할 수 있습니다.
이전 버전은 함수형 컴포넌트에서 state 를 사용할 수 없습니다.

함수형 컴포넌트에서 state 를 사용하려면 useState 를 사용해야 합니다.
useState 는 다음과 같이 사용할 수 있습니다.
const [state, setState] = useState(initialState);

useState 는 배열을 반환하게 됩니다. 배열을 반환받아서 구조 분해 할당으로
state 와 setState 를 사용할 수 있습니다.

useState 함수에 인자를 전달하면 state 값을 전달한 인자값으로 초기화 시킵니다.
설정한 state 는 setState 함수를 사용하여 값을 변경할 수 있습니다.

다음과 같이 사용할 수 있습니다.

const Counter = ({initialCount}) => {
  const [count, setCount] = useState(initialCount);
  return (
    <>
      Count: {count}
      <button onClick={() => setCount(initialCount)}>Reset</button>
      <button onClick={() => setCount(prevCount => prevCount - 1)}>-</button>
      <button onClick={() => setCount(prevCount => prevCount + 1)}>+</button>
    </>
  );
}

본 블로그는 김민준(velopert)님의 저서 '리액트를 다루는 기술 (개정판)'을 참고하여 정리한 글입니다. 이점 참고 부탁드립니다.