[レスポンス]ライフサイクル-コンポーネントDidUpdate

構成部品ライフサイクル

アンインストール
3つの方法で現れる.

componentDidMount()

componentDidUPdate()

componentDidUpdate(prevProps, prevState, snapshot)

注意事項

使用例(チェックボックス)

応用機器

アプリケーションコード

// Checkbox로 내려줄 체크된 리스트
@action
    private onChangeAllCheck = () => {
        this.isAll = !this.isAll;
        if (this.isAll) {
            this.AllCheckedList = [...allList];
        } else {
            this.AllCheckedList = [];
        }
        console.log(toJS(this.AllCheckedList))
    }
...
<div>
  <p>그룹 (Group) 정렬 - 전체선택</p>
  // 단일체크박스
  <Checkbox onChange={this.onChangeAllCheck} >전체선택</Checkbox>
  // 체크박스 그룹
  <CheckboxGroup options={options} onGroupChanged={action((values: any[]) => {
                                                   this.AllCheckedList = [...values];})}
                                                   values={this.AllCheckedList}/>
</div>

  componentDidMount() {
        const {defaultValue, values} = this.props;
        if (defaultValue) {
            this.checkedList = [...defaultValue];
        } else if (values) {
            this.checkedList = [...values];
        }
    }

    componentDidUpdate(prevProps: Readonly<CheckboxGroupInnerProps>, prevState: Readonly<{}>, snapshot?: any): void {
        if (prevProps.values !== this.props.values) {
            const {values = []} = this.props;
            this.checkedList = [...values];
        }
    }

// 2. 체크박스 그룹의 변경에따라 자식인 체크박스의 체크여부 통일 가능
    componentDidUpdate(prevProps: Readonly<CheckboxProps>, prevState: Readonly<{}>, snapshot?: any): void {
        if (this.props.checked != undefined &&
            prevProps.checked !== this.props.checked) {
            this.isChecked = this.props.checked;
        }
    }
...
// 1. 체크여부를 판단하고 컨트롤하는 기본 함수
    @action
    private handleCheckedBox = (e: React.MouseEvent<HTMLLabelElement>) => {
        const {onChange, disabled, checked, value} = this.props;
        const targetValue = (e.target as HTMLLabelElement).textContent || value || '';

        if (!disabled) {
            if (checked) {
                this.isChecked = true;
            }
            this.isChecked = !this.isChecked;

            onChange && onChange(targetValue, this.isChecked);
        }
    }