[React] UI 디자인

 

목차

 

 

📌  UI 디자인

 

 

 

 

📍 UI 디자인 패턴

 

반복되는 문제점에 과거의 다른 사람이 해결한 결과물을 재사용하기 좋은 형태를 만든 패턴

쉽게 말해 자주 사용되는 UI 컴포넌트

 

 

🔗 자주 쓰이는 UI 디자인 패턴

 

 

 

모달 (Modal)

 

 

모들 윈도(Modal Window)는 사용자 인터페이스 디자인 개념에서 자식 윈도에서 부모 윈도로
돌아가기 전에 사용자의 상호동작을 요구하는 창을 말한다.

 

https://www.appcues.com/blog/modal-dialog-windows

 

모달은 기존에 이용하던 화면 위에 오버레이 되는 창을 뜻한다.

닫기 버튼, 혹은 모달 범위 밖을 클릭하면 모달이 닫히는 것이 일반적이다.

모달을 닫기 전에는 기존 화면고 상호작용 X

꼭 보여주고 싶은 내용이 있다면 모달을 사용하는 것이 좋다.

 

//click 이라는 버튼을 눌러 onclick이 발생할 경우 modalHandler를 사용해 isModal이라는 state를 변경

const [isModal, setIsModal] = usestate(false);
const modalHandler = () => {
  setIsModal(!isModal);
}

...

<button onClick={modalHandler}>Click</button>

 

 

 

Toggle (토글)

 

Toggle Button을 On/Off Switch라고 생각하면 된다.
우리 키보드에 [Caps Lock], [Num Lock], [Scroll Lock] 다 Toggle Buttons이다.
색상, 스위치의 위치 등의 시각적인 효과를 주어 사용자가 직관적으로 파악할 수 있게 한다

 

 

<ToggleBtn onClick={clickedToggle} toggle={toggle}>
        <Circle toggle={toggle} />
      </ToggleBtn>
      <h3>Toggle Switch {!toggle ? "OFF" : "ON"}</h3>

 

 

 

탭 (Tab)

 

탭은 콘텐츠를 분리해서 보여주고 싶을 때 사용하는 UI 디자인 패턴

https://prod.velog.io/@fejigu/React-Tab-Component-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

 

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

...

export const Tab = () => {
  // Tab Menu 중 현재 어떤 Tab이 선택되어 있는지 확인하기 위한 currentTab 상태와 currentTab을 갱신하는 함수가 존재해야 하고, 초기값은 0.
  const [currentTab, clickTab] = 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) => {
    // parameter로 현재 선택한 인덱스 값을 전달해야 하며, 이벤트 객체(event)는 쓰지 않는다
    // 해당 함수가 실행되면 현재 선택된 Tab Menu 가 갱신.
    clickTab(index);
  };

  return (
    <>
      <div>
        <TabMenu>
          // 아래 하드코딩된 내용 대신에, map을 이용한 반복으로 코드를 수정
         // li 엘리먼트의 class명의 경우 선택된 tab 은 'submenu focused', 나머지 2개의 tab은 'submenu' 
          {/* <li className="submenu">{menuArr[0].name}</li>
          <li className="submenu">{menuArr[1].name}</li>
          <li className="submenu">{menuArr[2].name}</li> */}
          {menuArr.map((el,index) => (
              <li className={index === currentTab ? "submenu focused" : "submenu" }
              onClick={() => selectMenuHandler(index)}>{el.name}</li>
            ))}
        </TabMenu>
        <Desc>
          <p>{menuArr[currentTab].content}</p>
        </Desc>
      </div>
    </>
  );
};

 

태그 (Tag)

 

태그는 콘텐츠를 설명하는 키워드를 사용해서 라벨을 붙이는 역할
사용자들은 자신이 작성한 콘텐츠에 태그를 붙임으로써 콘텐츠를 분류
어떤 방식을 선택하든 태그의 추가와 제거는 자유롭게 할 수 있다

 

 

const Tag = () => {
  const [tagItem, setTagItem] = useState('')
  const [tagList, setTagList] = useState([])

  const onKeyPress = e => {
    if (e.target.value.length !== 0 && e.key === 'Enter') {
      submitTagItem()
    }
  }

  const submitTagItem = () => {
    let updatedTagList = [...tagList]
    updatedTagList.push(tagItem)
    setTagList(updatedTagList)
    setTagItem('')
  }

  const deleteTagItem = e => {
    const deleteTagItem = e.target.parentElement.firstChild.innerText
    const filteredTagList = tagList.filter(tagItem => tagItem !== deleteTagItem)
    setTagList(filteredTagList)
  }

  return (
    <WholeBox>
      <Title text='Tag' />
      <TagBox>
        {tagList.map((tagItem, index) => {
          return (
            <TagItem key={index}>
              <Text>{tagItem}</Text>
              <Button onClick={deleteTagItem}>X</Button>
            </TagItem>
          )
        })}
        <TagInput
          type='text'
          placeholder='Press enter to add tags'
          tabIndex={2}
          onChange={e => setTagItem(e.target.value)}
          value={tagItem}
          onKeyPress={onKeyPress}
        />
      </TagBox>
    </WholeBox>
  )
}

 

 

자동완성 (Autocomplete)

 

사용자가 내용을 입력 중일 때 사용자가 입력하고자 하는 내용과 일치할 가능성이 높은 항목을 보여주는 것

 

 

 

 

 

이외의 드롭다운, 아코디언, 캐러셀, 페이지네이션, 무한스크롤, GNB, LNB 등 다양한 기능들이 있다

 

 

📍 그리드 시스템(Grid System)

 

그리드란 수직, 수평으로 분할된 격자무늬를 뜻하며, 말 그대로 화면을 격자로 나눈 다음 그 격자에 맞춰 콘텐츠를 배치하는 방법
1970년대부터 사용
웹 디자인 분야에서는 화면을 세로로 몉 개의 영역으로 나눌 것인가에 초첨을 맞춘 컬럼 그리드 시스템을 사용
margin, column, gutter라는 세 가지 요소로 구성

 

 

1. Margin : 화면 양쪽의 여백을 의미
2. Column : 콘텐츠가 위치하게 될, 세로로 나누어진 영역
3. Gutter : column 사이의 공간, 콘텐츠를 구분하는데 도움을 줌