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

1. 클릭 이벤트 활용하여 상세 보기 만들기

 

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

    /* 모드 :  read, insert, update, delete, detail 등등 */

    const [mode, setMode] = useState('');

   

    /* selectedId : 선택된 행 index */

    const [selectedId, setSelectedId] = useState(1);

    /* 테이블 특정 항목 클릭시 동작하는 함수 */

    const ClickArrived = (id, event) => {

        console.log('선택한 아이디 : ' + id);

        setSelectedId(Number(id));

        setMode('detail'); // 상세 보기 모드로 변경

    };

            <Card.Body>

                <Content contents={products} onClickToContent={ClickArrived} />

            </Card.Body>

 

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

    var onClickToContent = props.onClickToContent;

    /* <td> 태그 클릭시 실행될 함수 */

    const ClickItem = (event) => {

            // 이벤트 발생은 td에서 시작하였으며, 부모인 tr의 id 객체를 가져오기 때문에 아래와 같이 사용합니다.

            // 자식의 객체를 가져올 경우에는 childNode를 사용합니다.

            const itemId = event.target.parentNode.id;

 

            // 부모 App에 id를 넘겨 줍니다.

            onClickToContent(itemId);

    };

            <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>

 

<적용 결과>

 

Javascript filter를 활용해보기

 

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

W3Schools.com

 

 

Display.js 파일 추가

function App(props) {

    const product = props.selectedProduct;

    console.log('product');

    console.log(product);

    return (

        <div>

            bb

        </div>

    );

}

export default App;

 

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

import Display from './components/Display';

    /* mode 변수에 따라서 화면을 다르게 보여 주는 함수 */

    const getContent = () => {

        if(mode === 'detail'){

            var mycontent = getReadContent();

            return <Display selectedProduct={mycontent} />;

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

        }

        return <></>

    }

    const getReadContent = () => {

        /* 선택한 상품 id에 해당하는 객체 1개를 반환합니다.*/

        const selectedProduct = products.filter((product) => product.id==selectedId);

        return selectedProduct[0];

    }

 

<적용 결과>

 

 

https://react-bootstrap.github.io/docs/components/table

Tables | React Bootstrap

 

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

        <div>

            <Table>

                <tbody>

                    <tr>

                        <td width='40%'> 테이블

                        <Table striped bordered hover>

                            <tbody>

                                <tr>

                                    <td>아이디</td>

                                    <td>{product.id}</td>

                                </tr>

                                <tr>

                                    <td>상품명</td>

                                    <td>{product.name}</td>

                                </tr>

                                <tr>

                                    <td>단가</td>

                                    <td>{Number(product.price).toLocaleString()}</td>

                                </tr>

                                <tr>

                                    <td>카테고리</td>

                                    <td>{product.category}</td>

                                </tr>

                                <tr>

                                    <td>재고</td>

                                    <td>{Number(product.stock).toLocaleString()}</td>

                                </tr>

                            </tbody>

                        </Table></td>

                        <td>이미지</td>

                        <td>상품설명</td>

                    </tr>

                </tbody>

            </Table>

        </div>

 

<적용 결과>

 

 

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

<td>

           <img src={'/images/'+ product.image} alt={product.name} width="210" height ="210"></img>

</td>

 

 

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

                        <td>

                            <p>

                                {product.description}

                            </p>

                        </td>

 

<적용 결과>

 

App.css 추가 부분

.table_padding{padding: 20px;}

.description{

    margin: 10px;

    padding: 7px;

    border: 1px dashed red;

}

 

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

 

        <div className ='table_padding'>

            <Table>

                <tbody>

                        <td>

                            <p className ='description'>

                                {product.description}

                            </p>

                        </td>

JSX 에서는 Class 대신에 ClassName으로 사용해야 합니다.

 

 

<적용 결과>