React Custom Component

z-index : CSS z-index 속성은 static인 요소 간에는 HTML 문서 상에서 나중에 나오는 요소가 먼저 나오는 원소 위로 올라온다.

닫기창 만들 때 텍스트에 &times 넣으면 X 모양이 된다.

 

Tab.is

export const Tab = () => {

// TIP: Tab Menu 중 현재 어떤 Tab이 선택되어 있는지 확인하기 위한

// currentTab 상태와 currentTab을 갱신하는 함수가 존재해야 하고, 초기값은 0 입니다.

const [ currentTab, setCurrentTab ] = useState(0)

const menuArr = [

{ name: 'Tab1', content: 'Tab menu ONE' },

{ name: 'Tab2', content: 'Tab menu TWO' },

{ name: 'Tab3', content: 'Tab menu THREE' },

];

const selectMenuHandler = (index) => {

// TIP: parameter로 현재 선택한 인덱스 값을 전달해야 하며, 이벤트 객체(event)는 쓰지 않습니다

// TODO : 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신되도록 함수를 완성하세요.

setCurrentTab(index)

};

return (

<>

<div>

<TabMenu>

{menuArr.map((el, index) => <li onClick={() => selectMenuHandler(index)} className={`submenu${index === currentTab ? " focused" : ''}`}>{el.name}</li>)}

</TabMenu>

<Desc>

{/*TODO: 아래 하드코딩된 내용 대신에, 현재 선택된 메뉴 따른 content를 표시하세요*/}

<p>{menuArr[currentTab].content}</p>

</Desc>

</div>

</>

);

};

 

---

종합퀴즈

1.

// WithAnImage.js
export function WithAnImage(props) {
  return <img style={{ width: props.width }} src={props.src} alt={props.alt} />;
}

// WithAnImage.stories.js
import { WithAnImage } from "./WithAnImage";
import Logo from "../Image/Codestates_Fulllogo_Color.png";
import SmallLogo from "../Image/smallLogo.jpeg";

export default {
  title: (1)____________,
  component: WithAnImage,
};

const Template = (args) => <WithAnImage {...args} />;

export const TypeOne = (2)____________;
TypeOne.args = {
  src: Logo,
  alt: "Logo",
  width: "300px",
};

export const TypeTwo = (2)____________;
TypeTwo.args = {
  src: SmallLogo,
  alt: "SmallLogo",
  width: "250px",
};

➡️ (1) "Example/Logo", (2) Template.bind({})

 

2. 

import { useState } from 'react';
import styled from 'styled-components';

export const Tab = () => {
  const [currentTab, setCurrentTab] = useState(0);

  const menuArr = [
    { name: 'Tab1', content: 'Tab menu ONE' },
    { name: 'Tab2', content: 'Tab menu TWO' },
    { name: 'Tab3', content: 'Tab menu THREE' }
  ];

  const selectMenuHandler = (index) => {
    setCurrentTab(index);
  };

  return (
    <>
      <TabMenu>
        {(1)__________.map((ele, index) => {
          return (
            <TabList
              key={index}
              className={(2)__________ ? 'submenu focused' : 'submenu'}
              onClick={(3)__________}
            >
              {ele.name}
            </TabList>
          );
        })}
      </TabMenu>
      <Desc>
        <Text>{menuArr[currentTab].content}</Text>
      </Desc>
    </>
  );
};

➡️ (1) menuArr , (2) currentTab === index , (3) () => selectMenuHandler(index)