리액트 알면 좋은 것들

 

 

 

 

1. Nullish coalescing operator -> 전자의 값이 null이거나 undefined일 때만 후자의 값을 return

ex) const foo = null ?? 'default string';

 

 

 

 

2. clickedFee!==undefined  ->  !!clickedFee

not 연산자를 두 번 사용해서 boolean 타입으로 만들 수 있습니다

 

 

 

 

3. Early reture

 

조건문 중 하나라도 만족하지 않는 경우에 false를 바로 반환하여 함수를 빨리 종료합니다. 이를 통해 불필요한 로직의 중첩을 줄이고 가독성을 높일 수 있습니다.

 

 

4. 최소한의 권한만 주자

 

setState함수를 그대로 내려주는 건 하위 컴포넌트에게 너무 많은 권한을 준다.

 

 

5. 유사배열객체

 

const yearList = Array.from(Array(11)).map((_, index) => getCurrentYear() - index)

대신에 const years = Array.from({length: 11}).map((_, index) => getCurrentYear() - index)로 바꾸자.

 

Array.from(Array(11))의 경우, 배열을 생성하는 과정이 추가되므로, 약간의 성능 저하가 있을 수 있습니다. 하지만, 대부분의 경우에는 미세한 차이

 

배열 이름의 경우 뒤에 s를 붙이는게 조금 더 맞는 표현 아래 프론트 컨벤션에 있음.

 

 

 

---

프론트 컨벤션

팀마다 다르겠지만 처음엔 귀찮지만 나중에 가면 결국 맞춰야한다는 컨벤션

 

1. 네이밍

• 변수 이름은 길어도 괜찮으니 필요한 내용은 다 담아주세요.
• boolean 변수는 is~ 로 시작
• 이벤트 핸들러 함수는 ‘handle’ + ElemetName + EventType 으로 해주세요.
  • 예시
    • handleAddButtonClick
    • handleMemberSelectedChange
• 함수 이름은 동사로 시작합니다.
• 배열 변수 이름
  • numbers : 배열의 원소들이 number
  • numberArray : 배열의 이름이 number
  • 대부분의 상황에서는 -s 를 붙인 복수형 명사를 사용하시게 됩니다.
• 페이지 컴포넌트 변수명은 끝에 Page를 붙인다.
  • ex. MigrationPage

 

2. 파일, 폴더 이름

• 컴포넌트는 PascalCase, 나머지 util 함수는 camelCase
• 대부분의 상황에서 ~.ts는 소문자, ~.tsx는 대문자입니다.

 

3. 컴포넌트 구현

• 코드 순서
  • useState, useRef 등의 hooks
  • useEffect
  • handler
  • return
• 굳이 다른 파일로 빼지 않아도 될 컴포넌트는 export할 컴포넌트의 아래에 둡니다.

 

4. 파일 경로

• 절대 경로 사용(상대 경로 사용 금지)

 

5. 상수 하드코딩 지양

• 상수는 data 폴더에 둡니다.
• 상수 변수명은 대문자 스네이크 표기법(NUM_QUESTIONS)을 사용합니다.
• 여기서 상수란 아래와 같은 것들이 있습니다.
  • 시스템 상수
    • 동아리 지원서 질문 갯수
  • 에러 메세지
    • const API_RESPONSE_ERROR_MESSEGE = “서버에 문제가 생긴 것 같아요”
  • 각종 데이터
    • const CATEGORIES = ['정치/사회', '종교', '봉사', '순수과학', 'IT/공학', '예체능', 'STUDY']
  • 경로

 

6. 함수는 화살표 함수(arrow function) 사용

• function 키워드는 사용을 자제해주세요.

 

7. interface vs. type

• 객체 타입은 interface, 나머지는 type 키워드 사용
• 참고 문서

 

8. Type은 가능한 좁히면 좋습니다.

• 단순히 string, number보다 type Semester = ${'SPRING' | 'FALL'}${number}`` 가 좋습니다.
• 참고 문서

 

9. 이벤트 핸들러의 이벤트 객체 타입을 지정해주세요.

• 이벤트 핸들러는 아래 예시처럼 선언하시면 됩니다.
  • const handleElementClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {…}
• MUI 컴포넌트 중 일부는 리액트에서 제공하는 이벤트 타입이 아닌, 자체 커스텀 이벤트 타입을 가지는 것이 있습니다. 아래 예시처럼 작성하시면 됩니다.
• // MUI TextField의 경우 event 객체의 타입은 아래와 같습니다. const handleChange = ( event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement> | SelectChangeEvent<string> ):void => {...}

 

10. API Response Type 반드시 작성해주세요.

• API Response Type은 models/apiResponseTypes 폴더에 둡니다.

 

11. 반드시 모든 타입을 달 필요는 없습니다.

• TS 컴파일러가 충분히 추론 가능할 경우 달지 않아도 됩니다.
• 참고 문서

 

11. 기타

• eslint, prettier 설정을 따릅니다.
• 애매하면 최대한 strict하게 짜시면 됩니다.

 

 

이벤트 핸들러 타입

 

const handleSemesterChange = (e: ChangeEvent<HTMLInputElement>) => {

위 코드 보다는 아래 코드로

const handleSemesterChange: React.ChangeEventHandler<HTMLInputElement> = e => {

 

---

React.FC 사용하기

 

const DateForm = (props: DateFormProps): JSX.Element => { 

위 코드 보다는 아래 코드로

const DateForm: React.FC<DateFormProps> = ({ prop1, prop2, ... }) => {