[프리온보딩] 220503 강의 메모 02 (코드리뷰)

코드리뷰

코드리뷰 #1

핸들러 함수

핸들러 함수를 따로 선언해두자

<div onClick={() => {console.log("asd")}}></div>

이런 식으로 인라인에 함수를 만들어두면 리렌더링 될 때 마다 함수가 재선언되므로 별로 썩 좋지 않다

또한 가독성을 해쳐 리팩토링에 도움이 되지 않는다

Typescript useState 타입설정

useState<boolean>(false);

state 초기화 시 들어간 값에 따라 타입스크립트가 자동으로 초기화해 주므로 굳이 이렇게 할 필요 없다

핸들러 이름 붙이기

handleEmailChange()
handleButtonClick()

handle + [대상] + [언제 핸들러가 실행되는지]

예를 들어 onChange에 달아주는 핸들러라면 끝 단어는 Change가 된다

onBlur에 달아주는 핸들러라면 끝 단어는 Blur가 되겠지

Managed State

const [email, setEmail] = useState("");

...
<input value={email} onChange={handleEmailChange} />

State를 사용할 거라면 관리가 필수다

예를 들어 Input 태그라면 value에 state를 붙이는 등 상태값을 사용해주어야 한다

map에서 Key값에 인덱스 그대로 넣지 않기

{arr.map((v, i) => <div key={i}></div>)}
// 이렇게 하지 마시오

{arr.map((v, i) => <div key=`test-div-${i}`></div>)}
// 이렇게 컴포넌트별 고유값을 만들기

arr.map 메소드를 여러개 쓰게 되면 키값을 단순히 인덱스로 지정해주었을 때 중복된 키값으로 에러가 발생할 수 있다

이것을 방지하기 위해 꼭 키값을 고유값 안에 인덱스를 넣는 식으로 하자

${} 사용할 때 굳이 양 옆에 백틱 붙이지 않기

`${email}` //이렇게 굳이 안해도
${email} //이렇게만 사용해주어도 된다

${} 문법을 사용할 때 다른 문자열과 같이 사용하는 것이 아니라면 굳이 백틱 필요없다

${} 문법은 자동으로 문자열 타입을 반환한다

focus-within

현재 클래스 요소나 내부 요소가 포커스 되었을 경우 (:focus) 를 나타내는 의사 클래스 선택자

이를 이용하여 어떠한 요소가 포커스되었거나 포커스가 풀렸을 때 스타일을 다르게 지정해줄 수 있다

오타

오타 구려

오타 내지맙시다

길이 지정할 때 단위 적어주기

margin-left: 12; //X
margin-left: 12px; //O

단위를 명시해 줍시다

cx (classnames)

클래스명을 편하게 지정해주도록 도와주는 라이브러리

클래스명을 여러 개 지정할 때 등에 조건문 등을 넣어 유동적으로 설정할 수 있다

가독성을 깔끔하게 해주는 것에 도움이 된다

코드리뷰 #2

들여쓰기

커뮤니티 표준으로 html, css, js는 들여쓰기가 스페이스 2칸이다

커뮤니티 표준이란 대부분의 사람이 그렇게 작업하므로 거의 공식이나 다름없다는 뜻

무조건 2칸 들여쓰기로 작업하자 (Prettier로 설정하자)

들여쓰기 4칸일 경우 컴포넌트가 복잡해질 수록 들여쓰기가 굉장히 깊이 들어가기 때문에 가독성이 하늘로 간다

Import 부분 개행 넣기

가독성

useRef.current.value나 getElementByID

내부 요소를 선택하는 선택자 → 이런거 쓰지 마세요

DOM에 접근해서 직접 조작하려고 하면 리액트에서 DOM을 렌더링할 때 DOM이 존재하지 않을 경우에 큰 문제가 발생할 수 있다

절대 하지 마세요

useRef는 내부 값 변경할 때 절대 쓰지 말 것

Email Validation 정규식

^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$

w3c (www 표준) 에서 만든 이메일 표준이므로 이것을 사용하시오 (검색: email w3c)

검색할 땐 구글에서 영어로

영어로 검색할 때 가장 정확한 결과값이 나옵니다

네이버에 검색할 경우 높은 확률로 오래된 자료가 나옴

e.target 말고 e.currentTarget

e.currentTarget은 이벤트 핸들러가 달린 요소를 반환

e.target은 이벤트 핸들러가 달린 요소와 이를 상속받은 요소들 중 실제로 이벤트가 발생한 요소만 반환

반드시 e.currentTarget을 쓰자

함수 중괄호 여부

setState((prevState) => {
    return !prevState;
});

이 함수는

setState((prevState) => !prevState);

이렇게 하는것과 같다

setState는 비동기적으로 작동한다

prevState를 애용해야 하는 이유

setState가 비동기적으로 작동하는 것 때문에 내가 원하는 대로 값이 안 바뀔 가능성이 높다

prevState를 이용하면 이를 방지할 수 있다

css 선택자는 id 말고 className으로 하세요

커뮤니티 표준이다

특히 리액트에서 스타일 작업할 때는 클래스명으로 하자

id를 사용하는 컴포넌트는 재사용이 불가능하며 HTML에 너무 의존적이라 리액트에서는 권장되지 않는다

input과 label 연결할 때나 요소에 직접 접근할 때 말고는 id를 쓸 일이 거의 없다고 보면 된다

이미지 파일 등 사용법

assets 등의 폴더에 분리해서 저장하자

한 컴포넌트 내에서만 사용하는 이미지일 경우 public 폴더 말고 해당 경로 안에 저장하는 것이 좋다

svg 파일 사용법

// src/assets/svgs/index.tsx
export { ReactComponent as BellIcon } from './ic-bell.svg'
export { ReactComponent as CalendarIcon } from './ic-calendar.svg'
export { ReactComponent as CalendarRangeIcon } from './ic-calendar-range.svg'
export { ReactComponent as CancelAlertIcon } from './ic-cancel-alert.svg'

//사용할 때
import { BellIcon } from 'svgs'

assets/svgs 이런 폴더 내에 별도의 인라인 svg 컴포넌트로 만들어서 사용하자

이렇게 하면 가독성도 깔끔해지고 svg에 클래스를 적용하여 스타일을 먹일 수 있다

트랜지션 시간

0.2초 정도가 적절 (딴건 넘 빠르거나 느림)

코드리뷰 #3

Input 기본 기능 꺼버리기

attribute로 꺼버릴 수 있다

autoCorrect: 자동완성

autoCapitalize: 자동 대문자

spellCheck: 철자 체크

useOnClickOutside hook

이 외부 훅을 사용하면 컴포넌트 바깥 클릭을 인식할 수 있다

심지어 모바일 대응 (touchStart) 도 해준다 (와~~)

useClickAway같은 것도 영역 바깥을 눌렀을 때 실행할 코드를 정의하기 쉽다

useMount, useUnmount (컴포넌트가 마운트/ 언마운트 됐을 때 실행) 등 훅을 잘 사용해 보자

가독성을 높이고 유용한 부가기능을 적용하게 해준다

https://github.com/streamich/react-use

React.useState 이렇게 쓰면 안이쁘다

import React, {useState} from "react";

...
const [a, setA] = useState(false);
...

이렇게 하면 React.를 굳이 붙일 필요 없다

색상 지정할 땐 색 이름 대신 hex값

background-color: white;
background-color: teal;

background-color: #112233;

코드리뷰 #4 (내꺼...)

Dropdown에서 값 search 안되는 이슈

왜지...? startsWith 대신 includes 메소드로 바꾸자

e.preventDefault()

html의 기본 동작 (a 태그, checkbox 등) 이 정의되어 있는 태그가 있음

이 태그들의 기본 동작을 막아버리는 역할을 한다

따라서 기본 동작이 정의되어 있지 않은 태그들은 굳이 사용할 필요가 없음

styledComponents에 탭 길이 4로 적용되는 문제

전부 리팩토링하시오 (ㅠㅠ;;)

prettier에 너무 의존했더니 백틱 안에는 스타일 적용이 안 되고 있었다

nth-child(1) 대신 first-child

훨씬 눈에 확 들어오게 해준다

그래도 가급적 클래스명을 쓰자

svg에 핸들러를 달아주지 않기

button 등의 태그로 한 번 감싸주고 button 태그에 핸들러를 달아주는 것을 추천

과도한 데이터 추상화

모든 데이터를 최상위 컴포넌트에서 관리 (최상위 App.js에서 출력해주기 위해서)

“당신에게 빨리 redux를 끼얹어서 입을 막아야겠다”

🤣🤣🤣🤣

className을 다 달아주세요

용도를 모르겠는 div (클래스명도 안달려있는 그런...) 쓰지맙시다
nth-child()에 의존하지 않기 (뭔지 알 수가 없다)

누가 div 삽입하면 스타일 다 망가진다

import React는 중괄호 밖으로 빼기

import React, {useState, useEffect} from "react";

리액트 최근 버전에선 굳이 React 안불러와도 오류가 나진 않는다

코드리뷰 #5

상수는 컴포넌트 밖으로 빼주기

const CONSTANT = 123

const temp = () => {)

그리고 상수명은 올 대문자로 적기

컴포넌트 안에 상수를 선언하면 컴포넌트가 리렌더링될 때마다 상수도 재선언된다

삼항연산자는 가급적 안쪽 요소 (props 등) 에서 사용

컴포넌트 전체를 삼항연산자에 넣지 맙시다

그외 팁

컴포넌트명은 대문자로 시작하도록

컴포넌트명은 PascalCase로 작성

유틸리티 함수는 소문자로 시작해도 상관없다

변수는 소문자로 시작하는 camelCase로 작성

상수는 대문자로 작성

자기 코드에 자신감을 갖지 마시오

항상 나는 별거없다 마인드로 살자 (ㅋㅋㅋ)

남의 코드가 더 좋아보이면 무작정 베끼지 말고 훔쳐와야 한다

훔쳐오라는것은 그냥 베끼라는게 아니라 완전히 내것으로 만들으라는 뜻

토글 구현할 때 팁

input type=’radio’를 이용

checked selector와 transform 속성을 이용하여 토글 버튼을 이동시켜줌

이메일 인풋박스 구현할 때 팁

input type=’email’을 이용

pattern attribute를 이용하여 정규식을 직접 넣어주고, e.target.validity.valid 변수를 통하여 validation에 통과했는지 여부를 가져온다

css 적용할 때 / 클래스명 구할 때 && 연산 쓰지 않기

잘못하면 false같은 문자열이 들어갈 수 있다

다른 웹사이트 뜯어보기

요소 검사

밥먹듯이 사용하시오

용량 기준

1메가만 넘어가도 사용하기 애매함

100kb만 넘어가도 썩 좋진 않음

webp를 사용하거나 색상 범위를 줄이는 등의 조치로 용량을 줄이자

NFT

너한테 팔고 튄다