장보기 todoList 만들기 4 emotion의 label

🚩emotion과 label

장보기 todolist를 만들고 따로 emotion을 학습하면서 눈에 들어왔던 기능이 있다. 바로 label을 붙일 수 있다는 점이다.

 

styled-component나 emotion은 기존 css를 쓰던 방식과 달리 스타일을 적용하기 위해 각 태그에 'class'명을 지정할 필요가 없어졌다. 즉 해시값으로 무작위로 겹치지 않는 클래스명을 만들어주기 때문에, 개별 스타일을 갖되 일일이 className은 지정해주지 않아도 되는 편리함이 있었다. 

 

하지만 이렇게 class-name을 지정하지 않자 문제점도 발생한다. 에러를 해결하기 위해 개발자도구를 열어 살펴본다고 가정해보자. 기존에는 <div class= "item-container"> 와 같이 구역을 전부 이름으로 구분해줬기 때문에 개발자 도구에서도 코드와 일치하는 태그를 찾기가 편리했다.

그러나 해시값을 쓰면 class명이 전부 무작위 글자가 되고 만다. 전체의 구조를 볼 때 어떤 코드가 어떤 부분과 일치하는지 알 수 없게 된 것이다.(열심히 뜯어본다면, 어떻게든 찾아낼 수야 있으나 눈이 아프다!)

 

이러한 문제점에 대한 대안으로 emotion은 label이라는 기능을 내놓은 것처럼 보인다.

const listSection = css`
  display: flex;
  justify-content: center;
  label: list-section;
`

심지어 라벨을 붙이는 방식은 매우 간단하다. 자신이 라벨을 붙이고 싶은 css 부분에 label: 원하는 이름 이렇게 적기만 하면 끝난다. 아래 이미지에서 보면 section 태그가 가진 무작위 클래스명 뒤에 -item-section이 붙어 있는 것을 볼 수 있다.

 

 

잠깐! 그런데 왜 -Header?

 

위처럼 라벨을 붙이고 개발자 도구를 살펴보던 중 또 다른 흥미로운 점을 발견했다. 내가 수동으로 라벨을 설정한 애들만 꼬리표가 붙는 줄 알았는데, <header class="css-c79ewr-Header">에 Header은 어디서 생긴 거지? 

궁금증을 갖고 개발자 도구를 훑어본 결과, 각 클래스 해시명 끝에는 포함된 컴포넌트 이름이 라벨처럼 따라붙는다는 사실을 알게 되었다.

 

예를 들어 아래의 코드에서는 App.js에서 <Header/> 컴포넌트와 <TodoItem>컴포넌트를 불러와 사용하고 있는데, 개발자 도구를 열어 확인한 결과 무작위 해시 뒤에 따로 label을 설정하지 않았는데도 <TodoItem>내에 있는 태그들은 모두 포함된 태그의 클래스명 끝에 -TodoItem이 붙는다는 것을 알 수 있었다. 

어떤 태그가 어떤 컴포넌트 소속인지 직관적으로 파악할 수 있는 기능 같아 마음에 든다. 

 

<Header />
      <section css={itemSection}>
        <section>
          <h2 css={pageTitle}>목록에 아이템 담기</h2>
          <input type="text" placeholder='아이템을 새로 추가하세요' 
          css={inputLine}  
          value={inputValue}  onKeyDown={handleOnKeyPress} onChange={handleInputChange}></input>
          <button css={addBtn}  
          onClick={handleAddBtnClick} >추가하기
          </button>
          </section>
        <section css={listSection}>
          <div css={itemListContainer}>
            {filteredTodo.length>0 ? (
              filteredTodo.map(item => (
                <TodoItem key={item.id} item={item}></TodoItem>
              )) 
              ):
                searchValue.trim() !== ''?(
                  <div css={emptyItem}>검색 결과와 일치하는 항목이 없습니다.</div>
                ):(
                  todo.map(item => ( <TodoItem key={item.id} item={item}/>)
            ))
            }
            
            </div>
        </section>

const deleteBtn = css`
  cursor: pointer;
  border-radius: 5px;
  label: delete-btn;
  //각각의 버튼마다 label을 달아줄 수 있다.
`

const modifyBtn = css`
  margin-right: 5px;
  label: modify-btn;
  //그러면 해시값 뒤에 -를 붙여 나온다.
`

 

심지어 아래의 사진처럼 직접 label을 설정하면 개발자 도구의 해시 뒤에 label 이 붙어 나오지만, label을 설정하지 않는다면 대신 컴포넌트 이름이 붙어 나오는 사실도 알 수 있었다. 아래 사진은 위 코드에서 label: modify-btn을 지운 결과이다. modify-btn만 TodoItem으로 바뀐 것을 볼 수 있다. 

 

즉 emotion에는 1) label을 직접 원하는 구역에 수동으로 붙이는 방식과, 2) 설정한 label이 없다고 해도 해시값 뒤에 각 태그가 소속된 컴포넌트의 이름이 붙어 어떤 컴포넌트 출신인지 파악할 수 있게 돕는 자체적인 방식이 존재하는 듯 하다. 둘다 기존에 구조를 파악하기 힘들었던 문제를 해결하는 데에 큰 도움이 될 것 같다.

 

 

참고: https://emotion.sh/docs/labels