ram2 🚗

이전에 react에서 제공하는 dropdown 라이브러리를 사용하여 커스텀 한 적이 있다.

하지만 내가 이번에 만들어야 하는 드롭다운은 해당 라이브러리를 커스텀해서는 할 수 없었다.

약 20분정도 해보고 안되니 다른 방법을 찾아보기 시작했다.

내가 하고 싶은 건, 아이콘을 눌렀을 때 드롭박스가 나오는 것이었는데 이러한 라이브러리를 찾아봤으나, 구독을 하거나 돈을 내야 사용할 수 있는 부분이었다.

고민 끝에 그냥 만들기로 했다.

대략적인 생각은 다음과 같다.

1. 아이콘 버튼을 생성한다.
2. 버튼을 클릭 했을 때 dropdown을 보여준다.
3. dropdown 컨테이너 안에 각 list에 라우터를 연결해 원하는 페이지로 이동시킨다.

1. 아이콘 버튼 생성하기

이부분은 완전한 ui 영역이기에 그냥 내가 사용한 아이콘 버튼 코드를 넣어두겠다.

<ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
         {/*  */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
</ProfileButton>

const ProfileButton = styled.button`
  text-align: center;
  background-color: ${theme.colors.background};
  color: ${theme.colors.white1};
  border-color: transparent;
  width: 35px;
  height: 35px;
  margin-right: 130px;
`;

2. 버튼 클릭 시 dropdown 보여주기

2-1. 상태 관리

이를 하기 위해서는 상태관리를 할 수 있는 useEffect가 필요하다.

버튼이 눌렸는지, 안눌렸는지에 따라 다른 화면 상태를 보여줘야 하기 때문이다.

const [isDropdownOpen, setIsDropdownOpen] = useState(false);

이를 위해 먼저 false로 초기화 된 isDropdownOpen 이라는 상태 변수를 생성하였다.

이 변수는 dropdown이 열려 있는지, 닫혀 있는지를 나타낸다. 예상했듯, false는 닫힌 상태이고, true는 열린 상태이다.

다음으로 setIsDropdownOpen이라는 함수를 연결했는데, 이 함수를 통해 isDropdownOpen의 값을 변경할 수 있다.

const ref = useRef(null);

useRef는 나도 아직 공부를 더 해봐야 하겠지만, DOM에 직접 연결할 수 있도록 해준다고 한다. DOM에 접근해서 무엇을 얻을 수 있는지 궁금했다. 찾아보니, 어떤 입력 필드에 자동으로 포커스를 맞추거나, 어떤 요소의 크기 혹은 위치를 알아내야 할 때 사용할 수 있다.

나는 버튼을 다시 클릭하거나, 외부 바탕을 클릭하면 드롭박스가 닫히게 하고 싶었다. 

이 ref를 사용한 자세한 코드는 2-2가 될 이벤트 리스너 부분에서 더 다룰 예정이다.

const toggleDropdown = () => {
  setIsDropdownOpen(!isDropdownOpen);
};

이 코드는 함수의 dropDown이 열려 있으면 닫고, 닫혀있으면 열겠다는 의미이다.

이 함수는 아이콘을 클릭했을 때 실행해야 한다.

2-2. 이벤트 리스너

다음으로 이벤트 리스너를 추가해준다.

앞서 살짝 언급했듯이, 드롭박스 외부의 영역을 클릭하면 드롭박스가 닫히게 하고 싶기 때문이다.

useEffect(() => {
    const handleClickOutside = (event) => {
      if (ref.current && !ref.current.contains(event.target)) {
        setIsDropdownOpen(false);
      }
    };

    document.addEventListener("mousedown", handleClickOutside);
    return () => {
      document.removeEventListener("mousedown", handleClickOutside);
    };
  }, [ref]);

정리하면, 무언가를 클릭했을 때 dropDown 외부의 것인지를 확인한다. 만약 외부의 것이라면 

ref.current.contains(event.target) 는 false가 된다.

그래서 외부라면, dropDown을 닫게 된다.

3. 드롭다운 만들고 사용하기

<DropdownContainer ref={ref}>
	{/* 아이콘 버튼 */}
        <ProfileButton
          onClick={toggleDropdown}
          style={{ backgroundColor: "transparent" }}
        >
        {/* 여기에 사용할 아이콘을 넣어준다. */}
          <AccountCircleIcon
            sx={{
              fontSize: "30px",
              color: "white",
              paddingTop: "5px",
              paddingLeft: "20px",
              paddingRight: "80px",
            }}
          />
        </ProfileButton>
        
        {/* 드롭박스가 열려 있을 때 StyledDropdown 보여주기 */}
        {isDropdownOpen && (
          <StyledDropdown>
            <ul style={{display: "flex", flexDirection: "column"}}>
              <DropdownTextStyle href="/myPage">내 벨로그</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">임시 글</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">읽기 목록</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">설정</DropdownTextStyle>
              <DropdownTextStyle href="/notFound">로그아웃</DropdownTextStyle>
            </ul>
          </StyledDropdown>
        )}
</DropdownContainer>

이렇게 하면, 내가 원하는 드롭다운 박스를 직접 만들어 사용할 수 있다 !!

결과

-> 프로필 아이콘 선택했을 때

-> 드롭다운에 있는 메뉴 호버 시

react에서 드롭박스 버튼 만들기

어쩌다 하게 되었냐면,

최근 학교에서 방학 중 진행하는 웹 서비스 캠프에 참여하고 있다.

개발 언어, 툴 등을 자유롭게 선택할 수 있기에 나는 프론트는 리액트로 개발하겠다 결정하였다.

현재 직접 프로젝트를 기획하여 새로운 서비스를 만들 수 있고, 실제 있는 서비스를 클론할 수도 있다.

동아리를 통해 기획의 과정이 얼마나 어렵고 힘든지를 알고 있었기에 나는 클론코딩을 선택하였다.

이번 캠프에서의 목표는 다음과 같다.

웹 서비스가 만들어지는 전체적인 과정을 익히는 것. (프론트부터 서버까지)

이를 위해 Velog를 클론코딩하기로 결정하였다.

서론이 길었는데, 클론코딩을 하다보니 드롭박스를 사용해야 할 일이 있었다.

사용하기만 하면 되는 것이 아니라, 디자인도 커스텀하는 과정이 필요했다.

1. react-dropdown 설치하기

터미널에 다음 명령어를 입력하고 라이브러리를 설치해준다.

// npm으로 설치하려면 다음 명령어를 입력하면 된다.
$ npm install react-dropdown

// yarn으로 설치하려면 다음 명령어를 입력하면 된다.
$ yarn add react-dropdown

https://www.npmjs.com/package/react-dropdown

( 자세히 알고 싶다면 위 사이트 참고하기 )

2. 상단에 import 해주기

설치가 완료 되었다면, 파일 상단에 다음 코드를 입력하여 import 해준다.

설치가 잘 되었다면, 아무런 에러 없이 import가 가능하다.

import Dropdown from 'react-dropdown';
import "react-dropdown/style.css";

두 가지를 모두 import 해줘야 한다 !

이렇게 import가 잘 되었다면, 다음과 같이 코드 내에서 사용할 수 있다.

const options = [
  'one', 'two', 'three'
];
const defaultOption = options[0];
<Dropdown options={options} onChange={this._onSelect} value={defaultOption} placeholder="Select an option" />;

(위 코드는 공식 문서에 나온 예제이다 !)

3. 커스텀 하기 !!

위 이미지는 내가 커스텀해서 만든 결과물이다.

커스텀을 하지 않으면, 기본 디자인으로 보여진다.

그럼 어떻게 다음과 같이 커스텀 하였는지 하나씩 살펴보자 !!

3-1. 드롭박스 자체를 커스텀하려면,

여기에서 드롭박스 자체란, 아래와 같은 이미지이다. 즉, 박스가 열리지 않은, 아무것도 하지 않았을 때 보여지는 부분이다.

현재 내가 준 커스텀은, 배경색, 폰트 크기, 박스 border-radius, 높이, 너비가 있다.

이러한 속성들을 수정하기 위해서는 다음과 같이 하면 된다.

앗 참고로 나는 styled component를 사용하였다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
`;

이렇게 .Dropdown-control을 가져와 해당 속성에 접근해 수정하면 된다.

3-2. 드롭박스를 열었을 때 보여지는 메뉴를 커스텀 하려면,

드롭박스를 클릭하여 열리는 메뉴들을 커스텀하려면 어떻게 해야할까?

이렇게 나는 메뉴의 배경 색, 폰트 크기, 폰트 색 등을 지정하였다.

드롭박스 메뉴를 커스텀 하기 위해서는 다음과 같이 하면 된다.

.Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }

이렇게 .Dropdown-menu에 접근하여 해당 속성들을 커스텀하면 된다.

3-3. 선택된 옵션을 커스텀하려면,

내가 선택한 옵션은 다르게 보여져야 한다. 3-2에서의 사진을 보면, 내가 선택한 '이번 주'는 색상이 다르게 표시된 것을 확인할 수 있다.

이처럼 선택한 옵션에 대한 속성에 접근하기 위해서는 이렇게 하면 된다.

.Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }

이렇게 .Dropdown-option.is-selected에 접근하여 선택한 옵션에 대한 디자인을 커스텀할 수 있다.

3-4. 마지막으로, 나머지 옵션들을 커스텀하려면,

이 부분은 3-2 부분에서 이미 설정해주었다 생각했으나, 따로 또 해줘야 적용이 되었다.

3-2, 3-4 둘 중 하나라도 주석처리하면 이렇게 된다..

선택된 옵션이 아닌 나머지 옵션들을 커스텀하기 위해 다음과 같이 하였다.

.Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }

이렇게 .Dropdown-option에 접근하여 해당 속성들을 설정해주었다.

4. 정리하면,

이렇게 할 수 있다. 나는 styled component를 사용하였기에 이렇게 백틱 안에 넣어주었다.

const StyledDropdown = styled(Dropdown)`
  .Dropdown-control {
    background-color: ${theme.colors.secondBlack};
    color: white;
    border-radius: 5px;
    border-color: transparent;
    width: 110px;
    height: 32px;
    font-size: 13px;
  }
  .Dropdown-menu {
    background-color: ${theme.colors.secondBlack};
    color: white;
    font-size: 13px;
  }
  .Dropdown-option.is-selected {
    color: ${theme.colors.primary};
    background-color: ${theme.colors.secondBlack};
    font-size: 13px;
  }
  .Dropdown-option {
    color: ${theme.colors.white};
    font-size: 13px;
  }
`;

실제 이 스타일을 적용하기 위해서는 다음과 같이 호출하면 된다.

<StyledDropdown options={options} value={defaultOption} />

이렇게 하면 기본으로 제공해주는 dropdown을 내가 원하는 디자인대로 커스텀할 수 있다.

#colorLiteral(

까지 입력하면, 사각형이 생기는데, 이 아이콘을 클릭하면 색상 팔레트가 열리는 것을 확인할 수 있다.

이렇게 하면, 원하는 색상을 쉽게 적용할 수 있다 !

지금까지 내장돼 있는 색상들을 . 을 눌러 한정적으로 선택했었는데, 이렇게 쉽게 예쁜 색들을 선택할 수 있게 되어 개발을 조금 더 재밌게 할 수 있다 ㅎㅎ

아주아주 좋은 꿀팁 🍯

앱 개발을 하다 보면 Simulator에서 다크모드, 라이트 모드를 번갈아가며 확인이 필요한 경우가 있다.

이때, 매번 설정에 들어가서 확인하는 것은 너무너무너무 비효율적이다...

아주 간단한 단축키로 쉽게 모드전환을 할 수 있다니 !!

command + shift + a

단축키를 사용하면, 아주 쉽게 모드를 바꿀 수 있다 !!

결과 예시

최근 진행 중인 프로젝트에서 swift data를 사용할지, realm을 사용할지 고민해오기로 했다.

swift에 입문한지 얼마 되지 않은 나는 사실 둘 다 잘 모른다...

swift Data에 대한 공식 문서을 짧게 한국어로, 내가 이해한 바를 풀어서 정리해보려고 한다.

시작!

🍎 Swift Data

swiftData는 선언형 코드를 사용하여 data를 쉽게 유지할 수 있게 해준다.

우리는 swift 코드를 사용해서 data를 query를 사용, filter할 수 있다.

그리고 이는 swiftUi와 원활하게 통합되도록 설계되었다고 한다.

🍎 swift로 모델 생성하기

추가로 파일을 생성하거나, 관리하기 위한 tool을 사용하지 않아도 @Model 을 사용해서 data를 구조화 하고 표현할 수 있다.

swiftData는 자동으로 많은 관계들을 추론할 수 있다. 또한, 우리는 @Attribute(.unique)와 같은 간단한 선언을 통해 제약들을 설명할 수 있다.

다음은 SwiftUI에서 이를 적용한 코드 예시이다.

@Model
class Recipe {
	@Attribute(.unique) var name: String
	var summary: String?
	var ingredients: [Ingredient]
}

🍎 Automatic persistence

swiftData는 우리의 모델을 사용해서 사용자 정의 스키마를 구축해주고, 해당 모델의 fields를 기반 스토리지에 효율적으로 매핑해준다.

즉, 모델의 필드를 데이터베이스 테이블의 열로 매핑할 수 있다는 것!

swiftData로 관리되는 객체들은 필요할 때 데이터베이스에서 가져올 수 있으며, 추가적인 작업 없이 원하는 적절한 시점에 자동으로 저장된다. 또한, ModelContext API를 사용하여 전체적인 제어를 할 수도 있다.

🍎 Integrates with SwiftUI

SwiftUI view에서 @Query를 사용하여 데이터를 가져올 수 있다.

SwiftData와 SwiftUI는 함께 동작하기 때문에, 기본 데이터가 변경될 때 수동으로 새로고침을 하지 않아도 실시간 업데이트 된다.

@Query var recipes: [Recipe]
var body: some View {
	List(recipes) { recipe in
		NavigationLink(recipe.name, destination: RecipeView(recipe))
	}
}

🍎 Swift-native predicates

컴파일러에 의해 검사한 특정 표현식을 사용하여 데이터를 쿼리하고, 필터링할 수 있다.

이렇게 하면, 개발 중 생기는 오타와 실수를 감지할 수 있다.

let simpleFood = #Predicate<Recipe> { recipe in
	recipe.ingredients.count < 3
}

🍎 CloudKit syncing

ClounKit와 연동할 수 있다.

🍎 Compatible with Core Data

기존에 core data를 통해 개발했다면, swift data로 전환할 수 있다.

얼른 한 번 써보고 싶다 !

참고 문서 : https://developer.apple.com/xcode/swiftdata/