1️⃣ React에서의 좋은 코드

휘향찬란, 새로운 문법 보다는 누구나 , 미래의 나, 동료 가 한 눈에 흐름을 파악할 수 있는 코드

🏅 JavaScript 에서의 클린코드

1. 의미있고 발음하기 쉬운 변수 이름을 사용하세요

2. 동일한 유형의 변수에 동일한 어휘를 사용하세요

3. 함수 인자는 2개 이하가 이상적입니다

   a. 특히 utils 함수에서 인자가 2개 이상 넘어가면 객체로 만드는게 좋다.

4. 함수는 하나의 행동만 해야한다

   a. 하나의 컴포넌트는 하나의 컴포넌트 역할을 해야한다.

   b. 중요한 이유 : 리팩토링의 첫번째는 함수 분리이다 ⇒ 유닛테스트 만들기에 용이함

5. 주석없이 코드로 설명하는 것이 가장 좋은 것이다.

   a. 회사 가면 clone을 2개 해서 1개는 진짜 개발, 1개는 학습용 깃 끊고 주석달면서 이해하기
   
   

🏅 React로 사고하기

컴포넌트 분리

⇒ 하나의 컴포넌트는 하나의 역할을 해야한다. (과제 점수에 영향이 있을 수 있음)

⇒ 얼마나 쪼개야 하는 것은 정답이 없고 토론으로 정하자.

state는 정확히 설계하고 쓰자!

⇒ 리액트는 최대한 render가 덜되게 해야한다. (state, props를 최소화한다)

⇒ useState의 함정 - 과도하게 사용하지 않기

⇒ state나 props로 충분히 계산해서 도출될 수 있는 값을 state로 굳이 만들고, useEffect를 오남용 하지 말것!

• props 통해 부모로부터 전달되나요? 그렇다면 state가 아닙니다.

• 시간이 지나도 변하지 않나요? 그렇다면 state가 아닙니다.

• 컴포넌트의 다른 state 또는 props을 기반으로 계산할 수 있나요? 그렇다면 state가 아닙니다.

• state setter 함수가 useEffect에서 동기적으로 사용되면 state를 제거하자 🚨

🏅컴포넌트 내 변수 위치

😓 유지보수에 가장 시간이 많이 드는 것은
동료, 그리고 미래의 내가 '코드를 한번에 보고 흐름 파악이 어려울 때'

가독성을 위해 서로 약속한다.

1. import 순서도 연관에 따라 묶어주자 ex) 멀리 있는 것 부터 차례대로

2. styled-component

   1. 컴포넌트와, styled.js 로 나누어서 한 폴더에서 관리한다.

3. 컴포넌트 안에서 쓰는 상수

   1. 함수 안에다가 상수 설정하지 말고 컴포넌트 밖에 선언한다 ⇒ 효율성 생각

4. 해당 컴포넌트에서만 사용할 함수 (2번 이상 사용하면 공통/컴포넌트 utils로)
   
   

import 작성의 convention✨

1. node modules

2. utils 같은 함수

3. 멀리 있는 컴포넌트

4. 근처에 있는 컴포넌트

5. style 관련한 것들
   
   
   

🏅 조건부 렌더링은 패턴이 아니라 가독성을 높이기 위한 팁이다

삼항 연산자 중첩은 파악이 힘들다.

• &&나 || 로 가능한지 한번 더 생각한다.

• 이중 삼항 연산자 ❌❌