21.1.25TIL Set, Tab_menu

Steve·2022년 1월 25일
0
post-custom-banner

Set
중복을 제거해줌

ex)
const kk1 = new Set([1,2,3,2,5]);
console.log(kk1); // {1,2,3,5} (객체임)

kk1.has(1); // true
kk1.has(12); // false

kk1.add(6); // {1,2,3,5,6}
kk1.delete(2); // {1,3,5,6}

Tab menu

const types = ["Option1", "Option2", "Option3"];

  const Tab = styled.button`
    padding: 10px 30px;
    cursor: pointer;
    opacity: 0.6;
    background: white;
    border: 0;
    border-bottom: 2px solid transparent;
    transition: ease border-bottom 250ms;

>해당 값의 조절을 아래와 같이 할 수 있다.

    ${({ active }) => 
      active &&
      `
      border-bottom: 2px solid black;
      opacity: 1;
    `}
  `;

  function TabGroup() {
    const [active, setActive] = useState(types[0]);
    return (
      <>
        <Option>
          <div>
            {types.map((type) => (
              <Tab
                key={type}
                active={active === type}
                onClick={() => setActive(type)}
              >
                {type}
              </Tab>
            ))}
          </div>
          <p />
          <p> What you chose : {active} </p>
        </Option>
      </>
    );
  }
profile
Front-Dev
post-custom-banner

0개의 댓글