미래의 React 구성요소: ES2022

안녕하세요, ES2022를 사용하여 만든 웹의 첫 번째 React 구성 요소인 액세스 가능한 확인란이 있습니다.

여기서 상태는 개인 인스턴스 변수입니다. # 접두사가 붙은 개인 인스턴스 변수는 ES2022에서 지원됩니다.

class Checkbox extends React.Component {

        #state = {checked: false};

        handleClick=(evt)=>{
            this.setState((state)=>
                ({checked: !state.checked})
            );
        }

        handleKeyDown=(evt)=>{
            if([' ','Enter'].includes(evt.key)) {
                this.handleClick();
            }
        }

        render() {
            return <div className="checkbox" 
                id={this.props.id} 
                role="checkbox" 
                aria-checked={this.state.checked} 
                aria-disabled={this.props.disabled} 
                onClick={this.handleClick} 
                onKeyDown={this.handleKeyDown} 
                tabIndex={!this.props.disabled? "0":null}>
                    {this.state.checked ? "✓":""}
            </div>
        }

    }

안타깝게도 최신 Babel 버전(7.0.0-beta.3)은 아직 지원하지 않습니다(2022년 7월 14일). JSX와 함께 사용하기 전에 기다려야 합니다.
class 키워드를 사용하여 구성 요소를 만드는 것이 마음에 들지 않으면 키워드 없이 클래스 구성 요소를 만드는 방법을 보여주는 다른 문서를 참조하십시오. (Internet Explorer 11 호환 가능)

ES5 클래스 기반 React 구성요소

CitronBrick ・ 6월 13일 ・ 2분 읽기

#react #ie11 #tutorial