🔍 프로그래머스 FE 데브코스 5기 WIL = 12.04 ~ 12.10

23.12.04 ~ 23.12.10

💻 Intro & TMI

대망의 React 강의가 시작되었다. React 강의는 시작되었지만 강의말고도 할 일이 너무너무 많았다.
타입스크립트 스터디에서 3주차 Todo List 과제 ts 마이그레이션, Vue 과제 코드 리뷰, 개인 포트폴리오 점검 등등 머리가 터져나갈 거 같았다.
그래도 더 이상 정리를 미루면 안 될 것 같아 한 주 동안 배운 것 중 중요한 것을 요약해보려고 한다.

---

🧐 이번주 새롭게 배운 것

Storybook 기반 컴포넌트 개발
Context API의 필요성
클립보드: writeText()
컴포넌트에 구현 방식에 대한 재조명
컴포넌트 컨테이너에서 Children을 배열로 뿌려주기

Storybook 기반 컴포넌트 개발

리액트 강의에서 가장 새롭게 알게 되었고 신선했던 것이 바로 Storybook이었다.
이전에 리액트를 클론코딩을 통해 겉핥기식으로 배웠을 때는 당장 useEffect나 Redux 같은 내장 함수나 라이브러리만 공부했었지 React를 사용해 개발할 때 어떠한 방식으로 개발할지에 대해서는 듣도보도 못했었다.

하지만 이 Storybook은 컴포넌트 기반으로 개발하는 React에 대해서 독립적인 UI 개발 환경을 제공한다.
내가 만든 또는 동료가 만든 컴포넌트의 UI와 해당 동작을 바로 확인할 수 있는 일종의 가이드북 역할을 한다.

생각보다 공식문서가 좀 불친절해서 강사님이 스토리북에서 컴포넌트의 arguments 들의 기본값과 컨트롤 방식을 지정하는 코드가 현재 버전과 맞지 않아 찾는데 고생했다.

// 강사님은 defaultValue를 다음과 같이 작성했다.
// 하지만 이것은 현재 버전(6.3)에서는 기본값에 대한 추론이 되지 않으면 자동으로 undefined로 정의하므로 args를 통해 따로 지정해주어야 한다.
argsTypes: {
  size: {
    defaultValue: 10,
    control: { type: 'range', min: 1, max: 20 },
  }
}

// 현재 버전(6.3)에서의 방법
args: {
  size: 10,
},
  
argsTypes: {
  size: {
    control: { type: 'range', min: 1, max: 20 },
  }
}

storybook에 대해서 진짜 처음 접해보았기에 이것을 정말 현업에서도 사용하는 가에 의문을 품었었다.

하지만 세희 멘토님께 질문드렸을 때에도 storybook을 많이 사용한다는 말씀을 해주셨고 실제로 실습을 하면서 진행해보니 협업을 할 때 팀원 간에 컴포넌트에 대한 공유를 할 때 한눈에 시각적으로 볼 수 있어 좋다고 느꼈다.

단, React에서 작성한 컴포넌트를 Storybook으로 표시하기 위해서는 해당 문법을 잘 파악해야 하므로 진입장벽이 있다는 것이 좀 흠이었다.
또한 컴포넌트에 많은 props가 있어 코드가 복잡하면 이를 storybook으로 옮기는 것도 어려웠기에 React에서 컴포넌트 구현 코드가 정말 중요하다는 것을 깨달았다.

2주 후 팀프로젝트를 진행하면서 한 번 기용을 고려해볼만한 개발환경 툴이다.

---

Context API의 필요성

기본적으로 컴포넌트들은 트리 구조로 이루어져 있다.
인접해 있는 컴포넌트 간에 props를 전달하는 것은 쉽다.

하지만 컴포넌트의 구조적 거리가 멀다면? 단계적으로 타고타고 들어가야 하므로 로직이 복잡해진다. 이 현상은 Prop Drilling 이라고 부른다.

따라서 이 문제를 해결하기 위해 React에서는 Redux, Recoil, Mobx, Context API 등 다양한 방법이 있다.

일단 기초가 중요하니 React에서 기본으로 제공되는 Context API에 대해 배우고 알아보았다.

기본적인 로직은 Context Provider가 제공(Provide)해야할 props를 전달받아
Context Consumer가 해당 props를 전달받아 사용(Consume)한다.

props를 자유자재로 전달할 수 있는 장점때문에 유용하다가 막 사용하게 되면 성능 이슈가 생길 수 있다. 뭐든 과유불급!
꼭 필요한 지점에만 사용하자.

또한 Cosumer는 반드시 Provider와 동시에 존재해야하므로 컴포넌트의 독립성을 해칠 수 있다. 그래서 더더욱 사용에 주의를 기해야 한다.

---

클립보드: writeText()

이모지 검색 페이지 실습 중 이모지 리스트 item을 클릭했을 때 해당 item에 있는 이모지 심볼을 복사하는 기능을 구현했다.

이 때 쓰인 것이 clipboard 인터페이스의 wirteText() 메서드이다.

// navigator.clipboard 에 접근해 지정된 emoji.symbol 텍스트 문자열을 컴퓨터 클립보드에 저장한다.
// 그리고 ctrl+v로 붙여넣기를 실행하면 해당 이모지 심볼이 불러와진다.
<ListItem onClick={() => navigator.clipboard.writeText(emoji.symbol)}>

이것을 통해 클립보드에 저장할 요소를 직접 지정할 수 있으니 복사 기능을 구현할 때 유용할 거 같다.

---

컴포넌트에 구현 방식에 대한 재조명

React를 잘 다루기 위해서는 어떻게 컴포넌트화를 할지에 대한 고민을 많이 해야할 것 같다.

실습을 통해 거의 20개 정도에 달하는 컴포넌트를 만들어보면서 느낀 점은
간단한 Slider(볼륨 조절바)나 Badge를 만들 때에도

1. 어떠한 속성이나 옵션을 props로 설정해주어야 하는지
2. 기능 구현을 위해 각 요소들을 어떻게 세분화할지

이 두 가지를 고려해서 만들어야 재사용성이 보장되는 좋은 컴포넌트가 될 수 있었다.

예를 들면 Slider 컴포넌트 같은 경우에는

사용자가 잡고 조절하는 손잡이는 Handle, 전체 막대가 Rail, 유효한 Rail 범위를 Track으로 나뉜다.

이것들을 분리하여 handle에 MouseEvent를 추적하여 Track의 width를 계산되게 구현했다.

간단한 값을 조절하는 막대를 구현하기 위해서 이것을 또 기능 또는 데이터, 옵션에 따라 세분화하는 아이디어나 센스가 정말 중요하다는 것을 깨달았다.

---

컴포넌트 컨테이너에서 Children을 배열로 뿌려주기

Breadcrumb이나 Tab 컴포넌트 같은 경우에는 해당 item들을 담는 Container에 무수히 많은 item 들이 컴포넌트로 들어올 수 있다.

하지만 이것을 일반화하여 props로 받은 children 컴포넌트 요소를 배열로 변환한 뒤 다시 원하는 Container의 children 요소에 뿌려주기 위해서는 특수 로직이 필요하다.

다음은 Breadcrumb 컴포넌트 코드이다.

const Breadcrumb = ({ children, ...props }) => {
  const items = React.Children.toArray(children)
  	// React.Children.toArray로 props로 받은 children 요소를 배열화한다.
  	// 배열화 한 children이 BreadcrumbItem 컴포넌트로부터 왔는지 filter한다.
    .filter((element) => {
      if (
        React.isValidElement(element) &&
        element.props.__TYPE === 'BreadcrumbItem'
      ) {
        return true;
      }

      console.warn("Only accepts Breadcrumb.Item as it's children.");
      return false;
    })
  	// filter한 요소들을 다시 cloneElement 메서드를 통해 props를 부여해서 컴포넌트화한다.
    .map((element, index, elements) => {
      return React.cloneElement(element, {
        ...element.props,
        active: index === elements.length - 1,
      });
    });
  return <BreadcrumbContainer>{items}</BreadcrumbContainer>;
};

isValidElement, cloneElement, React.Children.toArray 메서드에 대해서 처음이었기에 무슨 소린고 했다.

하지만 다수의 컴포넌트가 들어올 수 있는 컴포넌트의 묶음을 다시 컴포넌트화할 때는

1. 원하는 컴포넌트인지 확인한 뒤
2. 배열 요소에 props를 부여해서 다시 React 컴포넌트로 clone하여 매핑

이 두가지 로직으로 구현 가능한 것을 깨달았다.

---

👀 느낀점

선협님의 React 강의는 뭔가 엄청 함축적이다. 레벨이 초심자가 아닌 어느정도 중상급자 기준에 맞춰져 있다.
강의 러닝 타임은 10~15분이지만 권장 학습 시간은 50분으로 지정되어 있는 이유를 알겠다. 단순히 HRD-net 시간 채우기 용도가 아니라 정말 추가적인 자가 학습이 필요하다.

하지만 나는 오히려 좋다. 독스클럽을 통해 React 공식문서를 정독하기로 했었고 선협님 강의를 통해 해당 개념에 대한 이해가 부족하다는 메타인지를 느낄 때마다 관련 내용을 공식문서에서 찾아 읽어보니 시간은 엄청 걸리지만 차근차근 다시 공부하는 것 같아 좋다.

강의 이외 토이 프로젝트, 곧 있을 React 과제, 타입스크립트 스터디 등으로 인해 강의가 조금씩 밀리기도 하겠지만 이렇게 초심잃지 않고 기초(공식문서 = 교과서)를 다지면서 React를 조금씩 깨달아나가보도록 하자.

👍 Keep

React는 트렌드이자 필수 기술 역량이기에 공식문서 기반으로 다져나가고 있다. 시간을 투자한만큼 React 역량도 성장해나가면 좋겠다.

😱 Problem

시간이 진짜 너무너무 부족하다. 하지만 언젠까지 핑계를 댈 순 없는 법... 눈 떠 있을 때 최대한 집중하고 하나씩 하나씩 해보자..

😜 Try

막상 강의를 들어도 직접 내가 내 코드를 안 쳐보면 말짱 도루묵일 거 같다. 개인 프로젝트를 React+ts로 하기로 했으니 썩은무라도 베어보자. 딥다이브도 꼭 해보자 이번엔!!

번외

2차 팀 이후 오프라인 모임이 타입스크립트 스타디원과 전체 오프라인 모각코 일정이 잡혔다. 온라인으로 보던 프롱이들을 만난다니 알차고 유익한 시간이 되길 기원하며 오늘도 달려보자고

---

😅 해당 내용은 공부하면서 정리한 글입니다. 틀린 부분이나 오해하고 있는 부분이 있다면 피드백 부탁드립니다.