[프리온보딩] Discord에 공유된 사항들 정리

Off-Topic 팁 모음

리액트 하위 라이브러리 import

import React, { useState } from 'react';

...
const [text, setText] = React.useState(""); //X
const [text, setText] = useState(""); //O

리액트 하위 라이브러리들은 구조분해 할당을 통해 따로 import 해주자

사용할 때도 굳이 React.를 붙일 필요가 없다

컴포넌트 내의 함수 선언

<div onClick={(e) => { setState(e.target.value); }}></div> 
//X

...
const handleDivClick = (e) => {
    setState(e.target.value)
}
...
<div onClick={handleDivClick}></div> 
//O

컴포넌트 내에 인라인으로 함수를 정의해버리면, 해당 컴포넌트가 렌더링 될 때마다 함수가 만들어진다

이는 데이터나 속도 면에서 낭비이므로 최대한 사전에 정의하여 사용하자

간결한 조건문

if (text === "") {
    return i;
} else if (i.includes("aa")) {
    return i;
}
return false;
//X

if (!text || i.includes("aa")) return i;
return false;
//O

return (!text || i.includes("aa")) ? i : false;
//O

조건을 복잡하게 작성하는 대신 삼항연산자나 한 줄 조건문을 이용하면 길이를 대폭 줄일 수 있다

QuerySelector, JQuery 등

let element = document.querySelector(".my-class");
//X

사용하지말자

리액트 특성상 모든 컴포넌트가 렌더링된다는 보장이 없기 때문에 만약 쿼리셀렉터가 지정한 태그를 찾지 못할 경우 페이지 자체에 오류가 발생한다

정 컴포넌트를 선택하여 사용할 일이 있다면 useRef hook을 이용하여 해결하자

Key attribute에 index 바로 넘기지 말 것

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

{ arr.map((v, i) => 
    <div key=`test-div-${i}`>v</div>
}
//O

만약 한 컴포넌트 내에서 map을 두번 쓰게 된다면? key값이 중복되어 들어가는 불상사가 생길 것이다...

각 컴포넌트별로 고유값을 넣을 수 있도록 하자

들여쓰기 개수

<div className="test-class">
        <div className="test-class-2">
                <div className="test-class-3">
                </div>
        </div>
</div>
//X

<div className="test-class">
    <div className="test-class-2">
        <div className="test-class-3">
        </div>
    </div>
</div>
//O

C, C++은 들여쓰기 길이 4지만, HTML, CSS, JS는 들여쓰기 길이 2로 작성

커뮤니티 규칙이다 (보편적인 개발자가 따르는 룰 이라는 뜻)

Prettier 등의 린터 라이브러리를 쓰면 맞추기 좀 더 쉽다

StyledComponent, @Emotion, Tailwind 지양

• StyledComponent: 따로 정의한 스타일 컴포넌트명을 쓰게 되기 때문에 가독성이 떨어짐, HTML 태그 종류에 무감각해짐, div로 도배할 가능성이 커짐, 한 파일에서 스타일이랑 로직 구현을 다 하다 보니 파일 길이가 길어지고 가독성이 내려감
• Tailwind: 온갖 클래스로 도배되는 컴포넌트, 사전정의된 스타일을 쓰기 떄문에 CSS에 약해짐

한 파일당 150줄 이하로 작성하기

파일 길이가 길어질 수록 가독성이 내려간다

특히 스타일 작업은 별개의 파일에서 진행하는 것이 좋다

e.currrentTarget vs e.target

e.currentTarget vs e.target

prevState

prevState 사용 이유

svg는 assets 폴더에 정리해두기

파일이 길어지기 십상이다..

CSS 선택자로 ID 사용하지 말 것

보편적으로 className을 더 많이 사용한다