[프리온보딩] 220506 내 과제 리팩토링

내 과제 리팩토링

공식적인 내생각

작업 내용

Styled 제거하기

나의 영원한 친구 스타일컴포넌트... 하지만 시맨틱 태그 사용이나 classnames나 css modules에 익숙해지기 위해 잠시 바이바이 하기로 했다

스타일드 컴포넌트에 작성한 css 코드를 그대로 scss에 복붙했더니 컴포넌트들이.. 다 엉망이 되었다 (푸하하)

하나하나 CSS 모듈로 손수 바꿔주었다

div보단 다른 태그도 섞어써버릇

<div className={styles.dropdownTop} onClick={handleOnClick}>
    <div className={styles.dropdownTopHeader}>{selectedStr}</div>
    <TopArrow className={styles.topArrow} />
</div>

<button className={styles.dropdownTop} onClick={handleTopClick}>
    <span className={styles.dropdownTopSpan}>{selectedStr}</span>
    <TopArrowIcon className={styles.svgs} />
</button>

드롭다운의 윗부분을 구현한 코드이다

그냥 전부 div로 때려놨었다 ㅋㅋㅋㅋ 일단 헷갈리면 무조건 div

div를 최대한 지울 수 있는 대로 지우고 다른 태그로 교체했다 특히 onClick 이벤트는 div보단 button 태그에 더 어울리는 것 같다..

클래스명 규칙?

<div className="div-input">

<div className={styles.searchInput}>

css Module을 사용하니 클래스명을 Kebab case (kebab-case) 말고 Camel case (camelCase) 를 권장하더라

반쯤 당연하게 클래스명은 케밥케이스로 써야 한다고 생각하고 있었어서 조금 어색했다만 막상 자바스크립트 내에서 읽기엔 카멜케이스가 더 이뻐서 만족중이긴 하다

사실 다른 변수는 다 카멜케이스나 파스칼케이스인데 css 모듈 클래스명만 케밥케이스면 그게 더 이상할것같다

핸들러 작명하기 + e.preventDefault()

const handleOnClick = e => {
  e.preventDefault();
  setIfHidden(ifHidden ? false : true);
}; // Dropdown.js

const handleOnClick = (e, v) => {
  e.preventDefault();
  setStr(v);
  setIfHidden(true);
}; // DropdownBottom.js

const handleTopClick = () => setIsHidden(false);

 const handleListClick = v => {
  setSelectedStr(v);
  setIsHidden(true);
};

파일 여러 개를 합치고 스타일을 분리하면서 핸들러 이름이 겹치는 불상사(...) 가 발생했다

전부 handle + [컴포넌트명 / 동작명 등 구분명사] + [이벤트명] 으로 맞춰주었다

그리고 불필요한 e.preventDefault() 를 제거해주었다

 

e.preventDefault()를 일일이 달아주었던 이유는 특정 컴포넌트에서의 무한 리렌더링 때문이었는데, 그 진짜 원인을 밝혀냈기 때문에 이제 쓸모가 없다

Too many re-renders 오류

svg는 asset에서 관리하자

<div className="div-input">
    <svg
        id="Glyph"
        version="1.1"
        viewBox="0 0 32 32"
        xmlSpace="preserve"
        xmlns="http://www.w3.org/2000/svg"
    >
      <path
            d="M27.414,24.586l-5.077-5.077C23.386,17.928,24,16.035,24,14c0-5.514-4.486-10-10-10S4,8.486,4,14  s4.486,10,10,10c2.035,0,3.928-0.614,5.509-1.663l5.077,5.077c0.78,0.781,2.048,0.781,2.828,0  C28.195,26.633,28.195,25.367,27.414,24.586z M7,14c0-3.86,3.14-7,7-7s7,3.14,7,7s-3.14,7-7,7S7,17.86,7,14z"
            id="XMLID_223_"
        />
    </svg>
    <input
        type="text"
        onChange={handleOnChange}
        value={searchInput}
        placeholder="Search Symbol"
    />
</div>

어휴 꼴보기싫어!!!!!!!

사실 나도 알고 있었다... 너무 보기 지저분하다는것을...

하지만 뭔가 컴포넌트 개수를 최소화로 해야 할 것만 같았다...

export { ReactComponent as SearchIcon } from './SearchIcon.svg';

import { SearchIcon, TopArrowIcon } from '../../assets/svgs';

...

<div className={styles.searchInput}>
    <SearchIcon className={styles.svgs} />
    <input
        type="text"
        onChange={handleOnChange}
        value={searchInput}
        placeholder="Search Symbol"
    />
</div>

인라인 svg 대신 svg 파일로 새로 다운받아 src/assets/svg 폴더에 정리해 주었다

한 줄짜리 컴포넌트가 되어 깔끔해진데다가 클래스명까지 사용할 수 있다

export 시에 위처럼 ReactComponent를 이용하면 svg 확장자 파일도 컴포넌트로 사용할 수 있다

상수로 쓸 수 있는 값들은 별도의 scss 파일에 정리하여 사용하기

$WHITE: #ffffff;
$BLACK: #000000;
$GRAY2: #222222;
$GRAY3: #333333;
$GRAY6: #666666;
$GRAYA: #aaaaaa;
$GRAYD: #dddddd;
$GRAYE: #eeeeee;

$BLACK20P: rgba(0, 0, 0, 20%);
$BLACK50P: rgba(0, 0, 0, 50%);
$BLACK70P: rgba(0, 0, 0, 70%);

$REPO_THEME: #94b2b4;

GRAY 시리즈는 견본 scss 파일을 훔쳤다 (...)

16진수 태그를 일일히 때려박자니 파일이 많아지면 많아질 수록 내가 무슨 색을 썼었는지 기억하기도 힘들고, 색상명 (white, teal, magenta 등...) 을 사용하자니 색상폭이 매우 제한적인데다가 썩 보기에도 좋진 않다

자주 쓰는 색상이나 rgba값을 상수로 빼 두면 어떤 색을 써야 할 지 헷갈릴 때 색상표만 보고도 바로바로 찾아 넣을 수 있어서 매우 편리하다

key 값에 인덱스 때려넣지 않기

.map((v, i) => (
    <li key={i} onClick={() => handleListClick(v)}>
        {v}
    </li>
))}

map 메서드를 사용할 때 계속 unique key prop을 넘기라고 콘솔이 소리지른다

대충 key값은 배열 인덱스인 i로 때려넣으면 일단 해결되는 것 같아 보여서 기분은 좋다

.map((v, i) => (
    <li key={i} onClick={() => handleListClick(v)}>
        {v}
    </li>
))}

...

.map((v, i) => (
    <div key={i}>
        {v}
    </div>
))}

만약 map 메서드를 사용하는 곳이 더 있다면...?

키값이 다 겹쳐버려 대참사가 날 것이다

.map((v, i) => (
    <li key={`dropdown-list-${i}`} onClick={() => handleListClick(v)}>
        {v}
    </li>
))}

이렇게 문자열과 조합해서 적절히 고유한 값을 만들어서 사용하자

오늘 정리한 내용

stylelint

stylelint 설정

stylelint 설정

Too many re-renders 오류

Too many re-renders 오류

Too many re-renders 오류