치춘짱베리굿나이스
[프리온보딩] 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()
를 일일이 달아주었던 이유는 특정 컴포넌트에서의 무한 리렌더링 때문이었는데, 그 진짜 원인을 밝혀냈기 때문에 이제 쓸모가 없다
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
Too many re-renders 오류
'프로젝트 > 원티드 프리온보딩' 카테고리의 다른 글
[프리온보딩] 220508 그룹과제 #1 끝 (0) | 2022.05.09 |
---|---|
[프리온보딩] 220507 내 과제 리팩토링 2 (0) | 2022.05.08 |
[프리온보딩] 220505 투두리스트 작업하기 (0) | 2022.05.06 |
[프리온보딩] 220503 강의 메모 03 (VSCode, 레포 세팅) (0) | 2022.05.06 |
[프리온보딩] 220504 팀 빌딩 및 그룹 과제 #1 시작 (0) | 2022.05.05 |