Section3 Unit3 [React] Custom Component - 과제 React Custom Component (Bare Minimum)

출처: https://uxdesign.cc/selection-controls-ui-component-series-3badc0bdb546

---

Section3 Unit3 [React] Custom Component
- 과제 React Custom Component (Bare Minimum)

 

⭐️ 과제. React Custom Component

🔥 학습목표

React, Styled-Component, Storybook을 활용해 UI 컴포넌트 개발

• Styled Components를 활용해 다양한 기능의 커스텀 컴포넌트를 구현할 수 있다.

• Storybook을 사용해 컴포넌트들을 관리할 수 있다.

 

🏷️ Bare Minimum Requirement: Modal, Toggle, Tab, Tag

 

✏️ 구현 과정 & 코드 

→ 몰랐거나 헷갈렸던 부분 위주로 ✨메모

 

1. Modal

Modal UI 컴포넌트는 기존의 브라우저 페이지 위에 새로운 윈도우 창이 아닌, 레이어를 까는 것을 말한다.

 

 

---

• 팝업과 모달

팝업 Popup

팝업창은 Pop하고 튀어나오는(up) 웹 페이지 표시 방법을 가리킨다. 새 창을 표시하기 위해 기존 페이지 전환 방식이 아닌, 새로운 웹 브라우저 창을 하나 더 추가시키는 기능이다. 주 용도는 광고, 알림, 새로운 정보 갱신 등이 있다.

팝업은 트래픽을 증가시키기도 하고 메모리를 차지하는 일도 있기 때문에 요즘은 웹 브라우저에서 디폴트 값으로 팝업창 차단 기능을 지원한다.

→ 최근 팝업은 많이 없어지는 추세이다.

 

모달 Modal

웹에서 새 창을 띄우는 팝업창과는 달리 같은 브라우저 내부에서 상위 레이어를 띄우는 방식을 사용하는 창이다. 모달 창이 띄워진 경우, 이 창을 종료하지 않는 이상 원래의 화면을 작동할 수 없다. 따라서 사용자의 이목을 집중시키기 때문에 신중히 사용할 필요가 있다.

→ 모달은 용어 자체를 기업별로 다르게 사용하기도 하는데, 구글에서는 다이얼로그, 애플은 모달리티라는 용어를 사용한다.

 

---

✨ event.stopPropagation

{ isOpen && (
  <ModalBackdrop onClick={openModalHandler}>
    <ModalView onClick={(e) => e.stopPropagation()}>
      <p>Modal Opened!</p>
      <button onClick={openModalHandler}>❌</button>
    </ModalView>
  </ModalBackdrop>
)}

💬 ModalView 컴포넌트를 클릭해도 openModalHandler 이벤트가 실행되는 이벤트 버블링 현상을 막기 위해 event.stopPropagation()을 사용

 

 

2. Toggle

Toggle UI 컴포넌트는 두 가지 상태만을 가지고 있는 스위치이다.

 

✨ 조건부 렌더링

// 내가 작성한 코드
<div className={isOn ? "toggle-container toggle--checked" : "toggle-container"} />
<div className={isOn ? "toggle-circle toggle--checked" : "toggle-circle"} />

// 라이브 세션에서 작성한 코드
<div className={`toggle-container${isOn ? " toggle--checked" : ""}`} />
<div className={`toggle-circle${isOn ? " toggle--checked" : ""}`} />

💬 템플릿 리터럴을 활용하면 좀 더 간단하게 코드를 작성할 수 있다!

 

 

3. Tab

Tab UI 컴포넌트는 동일한 메뉴 라인에서 뷰를 전환할 때 사용한다.

 

✨ 구조분해할당과 리스트 렌더링

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);
};

// 내가 작성한 코드
{ menuArr.map((el, index) => (
  <li 
    key={index} 
    id={index} 
    className={ currentTab === index ? "submenu focused" : "submenu" }
    onClick={() => selectMenuHandler(index)}
  >
    {el.name}
  </li>
)) }

// 라이브 세션에서 작성한 코드

{ menuArr.map(({ name }, index) => (
  <li
    key={name}
    className={`submenu${currentTab === index ? " focused" : ""}`}
		
    // 아래 두 코드는 올바른 값이 나오지 않는다. 
    // className={`submenu ${currentTab === index ? "focused" : ""}`}
    // className={`submenu ${currentTab === index && "focused"}`}

    onClick={() => selectMenuHandler(index)}
  >
    {name}
  </li>
)) }

💬 menuArr의 name을 구조분해할당하여 전달하는 부분이 새로웠다. 생각해보지 못했던 부분이다.

💬 onClick={() => selectMenuHandler(index)} 이 부분에서 index를 전달하는 부분이 헷갈렸었다. onClick 이벤트가 발생하면 익명함수가 실행되고, 이 익명 함수는 selectMenuHandler를 호출한다. 이 때 map 메서드의 두번째 인수인 index를 함께 전달한다. 전달된 index는 selectMenuHandler 함수의 매개변수로 받게 되고, 이 index를 받아 currentTab을 변경한다.

 

💬 ↓ className 조건부 렌더링

// 바른코드
className={`submenu${currentTab === index ? " focused" : ""}`}

// 잘못된 코드 1
className={`submenu ${currentTab === index ? "focused" : ""}`}
// 위 코드 실행 결과 아래와 같이 class가 지정된다.
<li class="submenu focused">Tab1</li>
<li class="submenu ">Tab2</li>

// 잘못된 코드 2
className={`submenu ${currentTab === index && "focused"}`}
// 위 코드 실행 결과 아래와 같이 class가 지정된다.
<li class="submenu focused">Tab1</li>
<li class="submenu false">Tab2</li>

 

 

4. Tag

Tag UI 컴포넌트는 레이블 지정을 통해 구성이나 분류에 도움이 되는 키워드 집합을 만들 때 자주 사용된다.

 

✨ 이미 입력되어 있는 태그인지 검사하여 이미 있는 태그라면 추가하지 말기

let addedValue = event.target.value;

// 내가 작성한 코드
if (addedValue.length < 1) {
  console.log("아무것도 입력되지 않았습니다.")
  return;
}

for (let tag of tags) {
  if (tag === addedValue) {
    console.log("다른 값을 입력해 주세요.");
    return;
  }
}

// 라이브 세션 코드
if (addedValue === "") return;
if (tags.includes(addedValue)) return;

💬 for문과 if문을 함께 사용해서 같은 값을 찾는 대신 includes를 사용하면 간단하게 끝날 코드였다!

그리고, 나는 콘솔을 찍어준다고 여러줄 걸쳐서 적기는 했는데, 라이브세션 때 강사님은 한줄로 깔끔히 끝냈던 코드..! 결론적으로는 아래와 같이 적어주면 되지 않을까?

if (addedValue.length < 1 || tags.includes(addedValue)) {
  console.log("아무것도 입력되지 않았거나, 이미 있는 값입니다.")
  return;
}

 

✨ removeTags

const removeTags = (indexToRemove) => {
  // TODO : 태그를 삭제하는 메소드를 완성하세요.
  const newTags = tags.filter((_, idx) => idx !== indexToRemove);
  setTags(newTags)
};

💬 조금 헤맸던 부분!

💬 _, 사용하지 않는 인수를 이렇게 표현해서 가독성을 높이고, 사용되지 않음을 알려주기도 한다고 한다. 새로운 사실!

 

---

🌙  오늘의 회고

 styled component와 리액트 컴포넌트를 활용해서 커스텀 컴포넌트 만드는 연습을 했다. 주말에 조금 구현해봐서, 생각도 충분히 하며 조금 널널하게 진행했던 것 같다. 구현 도중에 스토리북이 궁금해서 오후 세션 때 질문을 했었는데 스토리북 굳이 너무 신경쓰지 말라는 이야기를 했던 것 같다. 주말동안 궁금해서 이것저것 찾아보고도 익숙치 않았던 스토리북이었는데, 오전 세션때도, 오후 세션때도 깊게 파지 않아도 된다고 하니 시간 투자를 다른 곳에 하기로 드디어 결심했다. 생각해보면 원티드 강의를 들을 때도 스토리북이 주제였지만, 음… 🧐 필수거나 강력 추천하던건 아니었던 것 같다. 나중에 회사에서 쓰면 그때 다시 공부해봐야지. 약간 흥미가 생겼고, 잘 사용해보고 싶었는데 지금은 때가 아닌가보다 ~.~ 리액트 공부할 것도 많고… 흠..