React 세미나1 상세뷰 만들기

[TheoLee72]

상세뷰를 만들려고 합니다!

view.js는 아래와 같이 만들었습니다. (아직 기능은 미완성, 특정 menu를 선택했을 때 뜨는지만 보려고 해논겁니다.)

import React from 'react';
import { useState } from "react";
import './view.css';



const view = (props) => {
    
    const { open, deselect, menus, update, remove} = props;
    const selectedMenu = menus.map((m) => (m.isselected==="selected" ? m:null));



    return (

        <div className={open ? 'openView' : 'closeView'}>
            {open ? (
                <section onClick={(e)=>e.stopPropagation()}>

                    <main>
                        {selectedMenu.name}
                    </main>
                    <footer>
                        <button className="close" >
                            수정
                        </button>
                        <button className="close" >
                            삭제
                        </button>
                    </footer>
                </section>
            ) : null}
        </div>
    );
};

export default view;

view.css는 아래와 같습니다.

.openView{
    position: absolute;
    right: 20px;
    top: 130px;
    background-color: white;
    width: 30%;
    height: 90%;
    border-style: solid;
    border-color: black;
    border-radius: 10px;
}

이를 App.js에서 불러왔습니다.

import view from './view.js';
<view open={globalSelect} deselect={deselect} menus={menus} update={updateMenu} remove={removeMenu}></view>

그런데

상세뷰가 안뜨네요;; 뭐 css적용해놔서 테두리라도 뜨길 바랬는데 안되서 이것저것 해봤는데도 그대롭니다...

[joongwon]

jsx에서 소문자로 시작하면 html 태그, 대문자로 시작하면 react 컴포넌트를 뜻합니다. view 이름을 DetailsView처럼 대문자로 시작하는 이름으로 바꿔보면 될 것 같네요.