"Edit 및 View 모드를 가진 동적 React 컴포넌트" 달성하기

title_thumbnail(

Table of Contents

편집 모드와 보기 모드를 갖춘 React 컴포넌트: 더 나은 접근 방식

React 개발의 세계에서는 특정 조건에 따라 컴포넌트가 다르게 동작해야하는 경우가 흔하지 않지 않습니다. 그런 상황 중 하나는 데이터를 표시하고 사용자가 그 데이터를 보기 모드 또는 편집 모드로 보거나 수정할 수 있는 컴포넌트가 있는 경우입니다. 이 블로그 게시물에서는 이 상황을 처리하기 위한 더 나은 접근 방식을 알아보겠습니다.

기존 접근 방식: 조건부 로직

더 나은 접근 방식을 살펴보기 전에, 기존의 코드 조각을 살펴보겠습니다:


render() {
    let buttons = null;
    if (this.props.mode === 'edit') {
        buttons = <div className="buttonList">
            <button onClick={this.onSave} className='defaultBtn'>Save</button>
            <button onClick={this.goBack} className='defaultBtn'>Discard Changes</button>
        </div>;
    } else {
        buttons = <div className="buttonList">
            <button onClick={this.goBack} className='defaultBtn'>Back</button>
        </div>;
    }
    // 나머지 코드...
}

현재 구현에서는 조건문을 사용하여 편집 버튼 또는 보기 버튼을 표시할지 여부를 결정합니다. 이 접근 방식은 작동하지만, 컴포넌트가 복잡해질수록 코드가 해석하기 어려워지고 유지 보수가 어려워질 수 있습니다.

더 나은 접근 방식: 관심사 분리

조건부 로직에 크게 의존하는 대신, 더 우아하고 유지하기 쉬운 솔루션은 보기와 편집의 관심사를 분리하는 것입니다. 이를 어떻게 구현할 수 있는지 알아보겠습니다.

ViewRecipe 컴포넌트

ViewRecipe 컴포넌트는 보기 모드에서 레시피를 렌더링하는 것이 책임입니다. 데이터를 표시하는 데만 초점을 맞춘 단순화된 render 메서드가 있습니다:


render() {
    return (
        <div className="single">
            <img src={this.state.recipe.imageURL} />
            <div className='recipeDetails'>
                <h1>{this.state.recipe.name}</h1>
                <IngredientList
                    ingredients={this.state.recipe.ingredients}
                    edit={this.props.mode}
                />
                {this.renderButtons()}
            </div>
        </div>
    );
}

EditRecipe 컴포넌트

EditRecipe 컴포넌트는 이름에서 알 수 있듯이 편집 모드에서 레시피를 렌더링하는 것이 책임입니다. 레시피의 세부 정보를 수정하기 위한 필요한 입력 필드를 제공합니다:


render() {
    return (
        <div className="single">
            <img src={this.state.recipe.imageURL} />
            <div className='recipeDetails'>
                <h1>{this.state.recipe.name}</h1>
                <TextField
                    type='text'
                    floatingLabelText='Image URL'
                    onChange={this.onImageUrlChange}
                />
                <IngredientList
                    ingredients={this.state.recipe.ingredients}
                    edit={this.props.mode}
                />
                {this.renderButtons()}
            </div>
        </div>
    );
}

관심사 분리의 장점

보기와 편집의 관심사를 분리함으로써 더 깨끗하고 유지하기 쉬운 코드베이스를 얻을 수 있습니다. 각 컴포넌트는 특정 기능에만 집중할 수 있으므로 이해하기 쉽고 수정하기 쉽습니다.

재사용성과 확장성

이 접근 방식의 또 다른 장점은 재사용성입니다. 나중에 EditRecipe 컴포넌트를 다른 곳에서 사용해야하는 경우, 코드를 중복하지 않거나 조건부 렌더링을 걱정할 필요가 없습니다. 단순히 편집 모드를 나타내는 prop을 전달하면 컴포넌트가 그에 맞게 처리해줍니다.

결론

이 블로그 게시물에서는 보기와 편집 모드 모두가 필요한 React 컴포넌트를 처리하기 위한 더 나은 접근 방식을 알아보았습니다. 관심사를 분리하여 보다 깨끗하고 유지하기 쉬운 코드를 얻을 수 있었습니다. 이 방법은 코드 가독성을 향상시킬 뿐만 아니라 재사용성과 확장성을 향상시킵니다.

최종적으로, 조건부 로직을 사용할지 관심사를 분리할지는 프로젝트의 특정 요구 사항에 따라 결정됩니다. 그러나 일반적인 권장 사항으로서, 관심사를 분리함으로써 코드를 단순화하고 모듈화하여 더 나은 개발자 경험을 얻을 수 있습니다.

참고 자료 :

reactjs

“Edit 및 View 모드를 가진 동적 React 컴포넌트” 달성하기