ReactJS에서 부모로부터 동적 자식 컴포넌트의 상태나 Props를 수정하는 방법

React.js: 부모로부터 동적 자식 컴포넌트의 상태 또는 속성 수정하기

React.js에서 동적 자식 컴포넌트의 상태 또는 속성을 수정하는 문제에 직면하고 있나요? 걱정하지 마세요! 이 가이드에서는 이 문제에 대해 어떻게 대처할지에 대해 이야기하고 실질적인 해결책을 제시합니다.

과제: React.js에서 탭 만들기

먼저 문제의 내용에 대해 이해해보겠습니다. React.js에서 탭을 만들고자 하지만 일부 어려움을 겪고 있습니다. 다음은 코드 구조의 예시입니다:

<RadioGroup>
    <Button title="A" />
    <Button title="B" />
</RadioGroup>

목표는 “Button A”를 클릭할 때 “Button B” 컴포넌트를 선택 해제하는 것입니다. 일반적으로 선택된 상태는 컴포넌트의 상태 또는 속성에서 파생된 className에 의해 제어됩니다.

하지만 여기에는 도전 과제가 있습니다. 코드 구조는 <RadioGroup> 컴포넌트 하위에 임의로 자식을 포함할 수 있습니다. 다음과 같은 모습일 수 있습니다:

<RadioGroup>
    <OtherThing title="A" />
    <OtherThing title="B" />
</RadioGroup>

가능한 해결책

해결책 1: cloneWithProps 사용하기

하나의 효과적인 해결책은 React의 cloneWithProps 메소드를 사용하는 것입니다. 이 메소드는 RadioGroup 컴포넌트에서 렌더링 시에 자식을 복제하여 효율적으로 속성을 전달할 수 있게 해줍니다. 다음은 작동 예시입니다:

// 필요한 컴포넌트를 구현합니다: RadioGroup, Button

var RadioGroup = React.createClass({
    onChange: function(e) {
        // 여기에서 자식 속성을 수정합니다
    },

    render: function() {
        var children = React.Children.map(this.props.children, function(child) {
            return React.cloneElement(child, {
                // 자식에게 필요한 속성 전달
                isSelected: child.props.title === e.target.value,
                onChange: this.onChange
            });
        }, this);

        return (
            <div onChange={this.onChange}>
                {children}
            </div>
        );
    }
});

var Button = React.createClass({
    render: function() {
        var className = this.props.isSelected ? 'selected' : '';

        return (
            <div className={className} onClick={this.props.onChange}>
                {this.props.title}
            </div>
        );
    }
});

이 접근 방식을 통해 부모 컴포넌트에서 자식 컴포넌트의 속성을 수정하여 자식 컴포넌트의 상태를 업데이트할 수 있습니다.

해결책 2: 부모 컴포넌트에서 상태 유지하기

다른 접근 방식은 상태를 부모 컴포넌트에서 유지하고 이를 자식에게 속성으로 전달하는 것입니다. 상태가 변경될 때마다 자식 컴포넌트는 자동으로 해당 내용을 업데이트합니다. 다음은 예시입니다:

// 필요한 컴포넌트를 구현합니다: RadioGroup, Button

var RadioGroup = React.createClass({
    getInitialState: function() {
        return {
            selectedButton: null
        };
    },

    handleButtonClick: function(button) {
        this.setState({
            selectedButton: button
        });
    },

    render: function() {
        var children = React.Children.map(this.props.children, function(child) {
            var isSelected = child === this.state.selectedButton;
            return React.cloneElement(child, {
                isSelected: isSelected,
                onClick: this.handleButtonClick.bind(this, child)
            });
        }, this);

        return (
            <div>
                {children}
            </div>
        );
    }
});

var Button = React.createClass({
    render: function() {
        var className = this.props.isSelected ? 'selected' : '';

        return (
            <div className={className} onClick={this.props.onClick}>
                {this.props.title}
            </div>
        );
    }
});

부모 컴포넌트에서 상태를 유지함으로써 자식 컴포넌트의 상태 또는 속성을 직접적으로 수정하지 않고도 쉽게 업데이트할 수 있습니다.

결론

이 가이드에서는 React.js에서 부모 컴포넌트로부터 동적 자식 컴포넌트의 상태 또는 속성을 수정하는 다양한 접근 방식을 살펴보았습니다. cloneWithProps나 부모 컴포넌트에서 상태를 유지함으로써 자식 컴포넌트의 동작을 효과적으로 관리하고 업데이트할 수 있습니다.

이 가이드가 React.js에서 동적 자식 컴포넌트를 사용할 때 마주치는 문제를 해결하는 데에 유용한 통찰력과 해결책을 제공해 줄 것입니다. 즐거운 코딩하세요!

참고 자료 : 

reactjs