소개

React.js은 UI 구축에 관한 것입니다. React.js 애플리케이션의 모든 개체 또는 기능은 UI에 기여합니다. 이 글에서는 React.js에서 사용되는 컴포넌트의 종류와 각 종류별 가능한 활용 사례에 대해 설명하겠습니다.

구성 요소 범위

React가 범위 내에 있는 한 JavaScript 함수 또는 ES6 JavaScript 클래스를 React 구성 요소로 만들 수 있습니다.

import React from 'react';

구성 요소 유형

기능의

Functional Components는 props를 인수로 받아들이고 유효한 JSX를 반환하는 함수입니다. 기능적 구성 요소는 오버헤드가 덜 필요하기 때문에 반응으로 구성 요소를 빌드할 때 일반적으로 선호되는 선택입니다.

import React from 'react';

function Todo(props){

    return (
      <div className="Todo">
        <h1>New Task: {props.task}</h1>
      </div>
    );
}

export default Todo;

사용 사례 - 구성 요소를 구축하기 위한 일반 시작 템플릿이 필요한 경우.

컴포넌트(리액트 클래스)

React.js의 클래스 구성 요소는 구성 요소 생성자를 상속합니다. 상태를 초기화하고 렌더링 메서드를 구현하며 수명 주기 후크를 사용할 수 있습니다.

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

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {}
  }

  componentWillMount() {}

  componentDidMount() {}

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

사용 사례 - 구성 요소가 DOM에 렌더링되고 완전한 반응 기능이 필요한 경우.

순수(리액트 클래스)

Pure 클래스와 Component 클래스의 차이점은 렌더링 방법입니다. Pure 구성 요소는 값이 변경되지 않은 경우 상태를 업데이트하지 않습니다.

   import React, { PureComponent } from 'react';

    class Result extends PureComponent {
      render() {
        return <li>{this.props.result}</li>;
      }
    }

    export default Result;

사용 사례 - 구성 요소의 일관된 렌더링을 피해야 하는 경우.

상태 저장 - (컨테이너, 스마트)

상태 저장 구성 요소는 구성 요소의 상태를 관리하는 구성 요소입니다. 구성 요소는 this.state 개체 또는 useState 후크를 통해 상태를 관리할 수 있습니다. 상태 저장 구성 요소는 종종 상태가 라이브 데이터 소스에 연결되기 때문에 종종 컨테이너 또는 스마트 구성 요소라고 합니다.

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

class Todo extends Component {
  constructor(props) {
    super(props);
    this.state = {
     text: 'Do Something',
     completed: false
    }
  }

  render() {
    return (
      <div className="Todo">
        <h1>New Task:</h1>
      </div>
    );
  }
}

export default Todo;

또 다른 예

import React from 'react';
import { useState } from 'react'


function Todo(props){

  const [todo, setTodo] = useState({
    text: 'Do something',
    completed: false
    })
    return (
      <div className="Todo">
        <h1>New Task: {todo.text}</h1>
      </div>
    );
}

export default Todo;

사용 사례 - 구성 요소의 상태를 관리하거나 업데이트해야 하는 경우.

무국적 - (프레젠테이션, 바보)

상태 비저장 구성 요소는 구성 요소의 상태를 관리하지 않습니다. UI의 일부를 제공하는 것이 유일한 작업이기 때문에 Presentational 또는 Dumb 구성 요소라고도 합니다.

import React from 'react'

const Todo = ({ onClick, completed, text }) => (
  <li
    onClick={onClick}
    style={{
      textDecoration: completed ? 'line-through' : 'none'
    }}
  >
    {text}
  </li>
)

export default Todo

또 다른 예

import React from 'react'
import Todo from './Todo'

const TodoList = ({ todos, toggleTodo }) => (
  <ul>
    {todos.map(todo =>
      <Todo
        key={todo.id}
        {...todo}
        onClick={() => toggleTodo(todo.id)}
      />
    )}
  </ul>
)
export default TodoList

사용 사례 - 구성 요소가 응용 프로그램의 다른 부분에서 재사용되고 뷰로만 작동하는 경우.

고차(HOC)

상위 구성 요소는 구성 요소를 소품으로 사용하고 새 구성 요소를 반환하는 함수 또는 구성 요소 그 자체입니다. DOM에 뷰를 렌더링하지 않기 때문에 다른 구성 요소와 다릅니다.

import React from 'react';

const withClass = props => (
  <div className={props.classes}>{props.children}</div>
);

export default withClass;

사용 사례 - 구성 요소에 몇 가지 추가 기능이나 스타일을 추가하려고 합니다.

결론

이들은 React.js 내의 다양한 유형의 구성 요소입니다. 개발에서 가장 일반적으로 사용되는 두 가지 구성 요소는 클래스와 기능입니다. 늘 그렇듯 조심하시고 이 글이 React.js를 배우는 데 도움이 되기를 바랍니다.