미니샵 홈페이지 만들어보기(with React Bootstrap) - (5)

1. 하단부 버튼 클릭이벤트 생성 및 처리하기 - (3)

 

1.1 삭제버튼 클릭시 선택된 정보 삭제하기

App.js  파일 수정 및 추가 부분

        }else if(mode === 'get_delete'){ /* 상품 삭제 */

            const remainProduct = getExceptData(selectedId);

            setProducts(remainProduct);

            setMode('read');

           

아래의 미니샵 홈페이지 만들어보기(with React Bootstrap) - (4) 에서 만들었던 getExceptData를 재사용합니다.

    const getExceptData = (id) => {

        // 상품의 아이디가 id가 아님 항목들만 필터링합니다.

        return products.filter((item) => item.id !== id);

    }

 

 

< 초기 데이터 화면>

 

<삭제 버튼 클릭 후, 카푸치노 데이터가 삭제된 결과 화면> 

 

1.2 기존 항목인 카테고리에 데이터 추가하기

App.js  파일 수정 및 추가 부분

    /* 카테고리 관련 */

    const categoryList = [

        {key:'bread', value:'빵'},

        {key:'beverage', value:'음료수'}

    ];

    const [category, setCategory] = useState(categoryList);

        }else if(mode === 'get_category_add'){

            return <CreateCategory />;

        }else{

           

            return <></>;

        }

 

CreateCategory.js  파일 추가

function App(){

    console.log('카테고리 추가');

   

    return(

        <div>카테고리 추가</div>

    );

}

export default App;

 

<카테고리 추가 버튼 클릭시, 적용 결과>

 

App.js  파일 수정 및 추가 부분

        }else if(mode === 'get_category_add'){

            return <CreateCategory onSubmitCategoryAdd={InsertCategory}/>;

    const InsertCategory = () => {

       

    }

 

CreateCategory.js  파일 수정 및 추가 부분

 

import { Button, Form, InputGroup } from "react-bootstrap";

function App(props) {

    const onSubmitCategoryAdd = props.onSubmitCategoryAdd;

    const SubmitCategory = (event) => {

        event.preventDefault();

        const formObject = event.target; /* 폼 객체 */

        onSubmitCategoryAdd(formObject);

    }

    return (

        <div>

            <h2>카테고리추가하기</h2>

            <Form action="#" method="post" onSubmit={SubmitCategory}>

                <InputGroup size="sm" className="mb-3">

                    <InputGroup.Text id="basic-addon1">카테고리명(영문)</InputGroup.Text>

                    <Form.Control type="text" name="key"

                        aria-describedby="basic-addon1 inputGroup-sizing-sm" />

                </InputGroup>

                <InputGroup size="sm" className="mb-3">

                    <InputGroup.Text id="basic-addon1">카테고리명</InputGroup.Text>

                    <Form.Control type="text" name="value"

                        aria-describedby="basic-addon1 inputGroup-sizing-sm" />

                </InputGroup>

                <Button type="submit" value={'추가'}>카테고리 추가</Button>

            </Form>

        </div>

    );

}

export default App;

 

 

<하단의 카테고리 추가 버튼 클릭시 적용화면>

App.js  파일 수정 및 추가 부분

    const InsertCategory = (formData, event) => {

        const newCategory = {key:formData.key.value, value:formData.value.value};

        const totalCategory = category.concat(newCategory);

        setCategory(totalCategory);

        setMode('read');

    }

 

 

1.3 CreateContent에 카테고리 데이터를 동적으로 만들기

 

기존에 하드 코딩 되어 있는 카테고리 관련 소스도 같이 수정해줘야합니다.

 

App.js  파일 수정 및 추가 부분

        }else if(mode === 'get_insert'){ /* 생성 버튼(get 방식) */

            return <CreateContent onSubmitInsert={InsertedData} categories={category}/>;

 

https://www.w3schools.com/Jsref/jsref_map.asp

W3Schools.com

 

CreateContent.js  파일 수정 및 추가 부분

    // 기존에 hard coding 되어 있는 카테고리 정보를 동적으로 만들어 주기 위한 props입니다.

    const categories = props.categories;

    const categoryList = categories.map((item, index) =>

        <option key={index} value={item.key}>{item.value}</option>

    );

기존에 하드 코딩 되어 있는 카테고리 관련 소스도 같이 수정해줘야합니다.

 

<수정전>

                    <InputGroup.Text id="basic-addon1">카테고리</InputGroup.Text>

                    <Form.Select size="sm" name="category" aria-label="카테고리 선택">

                        <option>카테고리를 선택해 주세요.</option>

                        <option value="bread">빵</option>

                        <option value="beverage">음료수</option>

                    </Form.Select>

                </InputGroup>

 

<수정후>

                <InputGroup size="sm" className="mb-3">

                    <InputGroup.Text id="basic-addon1">카테고리</InputGroup.Text>

                    <Form.Select size="sm" name="category" aria-label="카테고리 선택"

                        required defaultValue="">

                        <option value="">카테고리를 선택해 주세요.</option>

                        {categoryList} {/* 동적으로 생성함 */}

                    </Form.Select>

                </InputGroup>

 

 

<신규 카테고리 정보(디저트)를 추가하는 화면>

 

<동적으로 추가한 카테고리 정보(디저트)를 확인한 결과>

 

1.4 UpdateContent에 카테고리 데이터를 동적으로 만들기

 

App.js  파일 수정 및 추가 부분

        }else if(mode === 'get_update'){ /* 수정 버튼(get 방식) */

            const currentRow = getReadContent(); //currentRow : 현재 선택된 행 정보

            return <UpdateContent formData={currentRow} onSubmitupdate={UpdateData} categories={category}/>;

 

UpdateContent.js  파일 수정 및 추가 부분

    const categories = props.categories;

    const categoryList = categories.map((item, index) =>

        <option key={index} value={item.key} selected={formData.category === item.key}>

            {item.value}

        </option>

    );

 

<수정전>

                <InputGroup size="sm" className="mb-3">

                    <InputGroup.Text id="basic-addon1">카테고리</InputGroup.Text>

                    <Form.Select size="sm" name="category" aria-label="카테고리 선택" onChange={InputChange}>

                        <option>카테고리를 선택해 주세요.</option>

                        <option value="bread" selected={formData.category === 'bread'}>빵</option>

                        <option value="beverage" selected={formData.category === 'beverage'}>음료수</option>

                    </Form.Select>

                </InputGroup>

 

<수정후>

                <InputGroup size="sm" className="mb-3">

                    <InputGroup.Text id="basic-addon1">카테고리</InputGroup.Text>

                    <Form.Select size="sm" name="category" aria-label="카테고리 선택" onChange={InputChange}>

                        <option>카테고리를 선택해 주세요.</option>

                        {categoryList}

                    </Form.Select>

                </InputGroup>

 

<적용 결과>

 

https://www.w3schools.com/jsref/jsref_find.asp

W3Schools.com

 

 

App.js  파일 수정 및 추가 부분

           <Card.Body>

                <Content contents={products}

                onClickToContent={ClickArrived}

                categories={category}/>

            </Card.Body>

 

Content.js  파일 수정 및 추가 부분

 var categories = props.categories;

 

<수정전>

function getProductList(item, index){

    const trTag =

        <tr key={index} id={item.id}>

            <td align='center' onClick={ClickItem}>{item.name}</td>

            <td align='right' onClick={ClickItem}>{Number(item.price).toLocaleString()} 원</td>

            <td align='center' onClick={ClickItem}>{item.category === 'bread' ? '빵' : '음료수'}</td>

        </tr>

    ;

    return trTag;

}

 

<수정후 - (1)> 

카테고리를 추가 될 때마다 수동으로 등록시켜줘야하는 문제 발생함.

function getProductList(item, index){

    var hangul = '';

   

    switch(item.category){

        case 'bread' :

            hangul = '빵';

            break;

        case 'beverage' :

            hangul = '음료수';

            break;

        case 'cake' :

            hangul = '케익';

            break;

    }

    const trTag =

        <tr key={index} id={item.id}>

            <td align='center' onClick={ClickItem}>{item.name}</td>

            <td align='right' onClick={ClickItem}>{Number(item.price).toLocaleString()} 원</td>

            <td align='center' onClick={ClickItem}>{hangul}</td>

        </tr>

    ;

    return trTag;

}

 

<수정후 - (2)>

function getProductList(item, index){

    const findItem = categories.find((element) => element.key === item.category);

    var hangul = findItem ? findItem.value : '';

    const trTag =

        <tr key={index} id={item.id}>

            <td align='center' onClick={ClickItem}>{item.name}</td>

            <td align='right' onClick={ClickItem}>{Number(item.price).toLocaleString()} 원</td>

            <td align='center' onClick={ClickItem}>{hangul}</td>

        </tr>

    ;

    return trTag;

}

 

 

<적용 결과>