React
무국적 기능 구성 요소

비고

무국적 기능 구성 요소

구성 요소를 사용하면 UI를 독립적 인 재사용 가능한 부분으로 분할 할 수 있습니다. 이것은 React의 아름다움입니다. 페이지를 여러 개의 작은 재사용 가능한 구성 요소 로 분리 할 수 ​​있습니다.

React v14 이전에는 React.Component (ES6) 또는 React.createClass (ES5)를 사용하여 상태를 필요로하는지 여부에 관계없이 Stateful React 구성 요소를 만들 수있었습니다.

React v14에서는 일반적으로 무국적 기능 구성 요소 라고하는 구성 요소를 정의하는 더 간단한 방법을 소개했습니다. 이러한 구성 요소는 일반 JavaScript 함수를 사용합니다.

예 :

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

이 함수는 하나의 props 객체 인수를 데이터와 함께 받아들이고 React 요소를 반환하기 때문에 유효한 React 구성 요소입니다. 이러한 컴포넌트는 말 그대로 JavaScript 함수 이기 때문에 기능적 이라고 부릅니다.

상태 비 저장 기능 구성 요소는 일반적으로 UI에 중점을 둡니다. 상태는 더 높은 수준의 "컨테이너"구성 요소 나 Flux / Redux 등을 통해 관리되어야합니다. Stateless 기능 구성 요소는 상태 또는 라이프 사이클 방법을 지원하지 않습니다.

은혜:

1. 클래스 오버 헤드 없음
2. this 키워드에 대해 걱정할 필요가 없습니다.
3. 쓰기 쉽고 이해하기 쉽습니다.
4. 상태 값 관리에 대해 걱정할 필요가 없습니다.
5. 성능 향상

요약 : 상태가 필요없는 React 구성 요소를 작성하고 재사용 가능한 UI를 만들고 싶다면 표준 React 구성 요소를 작성하는 대신 Stateless 기능 구성 요소 로 작성할 수 있습니다.

간단한 예를 들어 봅시다.

사용자를 등록하거나 등록 된 사용자를 검색하거나 등록 된 모든 사용자의 목록을 표시 할 수있는 페이지가 있다고 가정 해 보겠습니다.

index.js 응용 프로그램의 시작점입니다.

import React from 'react';
import ReactDOM from 'react-dom';

import HomePage from './homepage'

ReactDOM.render(
    <HomePage/>,
    document.getElementById('app')
);

HomePage 구성 요소는 사용자를 등록하고 검색 할 수있는 UI를 제공합니다. 상태, UI 및 동작 코드를 포함하는 일반적인 React 구성 요소입니다. 등록 된 사용자 목록의 데이터는 state 변수에 저장되지만 재사용 가능한 List (아래 참조)는 목록의 UI 코드를 캡슐화합니다.

homepage.js :

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

import List from './list';

export default class Temp extends Component{
    
    constructor(props) {
        super();
        this.state={users:[], showSearchResult: false, searchResult: []};
    }

    registerClick(){
        let users = this.state.users.slice();
        if(users.indexOf(this.refs.mail_id.value) == -1){
            users.push(this.refs.mail_id.value);
            this.refs.mail_id.value = '';
            this.setState({users});
        }else{
            alert('user already registered');
        }
    }

    searchClick(){
        let users = this.state.users;
        let index = users.indexOf(this.refs.search.value); 
        if(index >= 0){
            this.setState({searchResult: users[index], showSearchResult: true});
        }else{
            alert('no user found with this mail id');
        }
    }

    hideSearchResult(){
        this.setState({showSearchResult: false});
    }

    render() {
        return (
            <div>
                <input placeholder='email-id' ref='mail_id'/>
                <input type='submit' value='Click here to register' onClick={this.registerClick.bind(this)}/>
                <input style={{marginLeft: '100px'}} placeholder='search' ref='search'/>
                <input type='submit' value='Click here to register' onClick={this.searchClick.bind(this)}/>
                {this.state.showSearchResult ?
                    <div>
                        Search Result:
                        <List users={[this.state.searchResult]}/>
                        <p onClick={this.hideSearchResult.bind(this)}>Close this</p>
                    </div>
                    :
                    <div>
                        Registered users:
                        <br/>
                        {this.state.users.length ? 
                            <List users={this.state.users}/>
                            :
                            "no user is registered"
                        }
                    </div>
                }
            </div>
        );
    }
}

마지막으로, 사용 된 상태 비 저장 기능 구성 요소 List 는 등록 된 사용자 목록 과 검색 결과를 표시하지만 상태 자체는 유지하지 않습니다.

list.js :

import React from 'react';
var colors = ['#6A1B9A', '#76FF03', '#4527A0'];

var List = (props) => {
    return(
        <div>
            {
                props.users.map((user, i)=>{
                    return(
                        <div key={i} style={{color: colors[i%3]}}>
                            {user}
                        </div>
                    );                
                })
            }
        </div>
    );
}

export default List;

참조 : https://facebook.github.io/react/docs/components-and-props.html