앞 게시물인 React의 성능 최적화가 가장 중요한가?과 전체적으로 내용의 흐름이 비슷하여 참고하셔도 좋을 것 같습니다!
그리고 내용들이 개념을 알려주는 것 보단 실무를 볼 때 놓칠만한 내용이 주로 이루어져있습니다.

📕 JavaScript에서의 클린코드

React에서 좋은 코드인데 왜 JavaScript 얘기 하는지 의문이 들수도 있지만 React는 다른 자체적인 프레임워크가 아니라 JavaScript 기반으로 만들어진 라이브러리라서 JavaScript의 근본적인 내용을 더 잘 알아야한다.
그렇기에 JavaScript의 기반인 내용을 더 탄탄하게 알고 가는게 좋다.

🗒 변수의 이름으로 내용을 안봐도 명확하게!

개발자들이 가장 힘든게 뭔가라고 물으면 '변수 이름 짓는게 제일 힘들어요~'라고 할 정도로 변수만 봐도 뜻을 알 수 있게 짓는건 정말 어렵다.

그렇게 어려운 변수 이름 짓기는 몇 가지의 규칙을 지켜서 지으면 그나마 어렵더라도 새로운 사람이 봐도 읽히기 쉬워 코드 분석하는 시간을 줄일 수 있다.

1. 의미있고 발음하기 쉬운 함수

• 날짜를 나타내는 변수
  yyyymmddstr 👉 currentDate
• 장소를 나타내는 변수
  here 👉 currentLocation

2. 동일한 유형의 변수에 동일한 어휘 사용

• 유저의 데이터를 불러오는 경우
  getUserInfo();
  getClientData();
  getCustomerRecord();
  👇
  getUser();

---

🤔 변수, 함수 이름을 왜 직관적이고, 내용을 알 수 있게 지어야할까?

간혹 개발을 혼자하는 일이라고 생각하시는 분들이 계시던데 정말 그건 오산이고 하나의 프로젝트를 다같이 만들어야 함으로 정말 많은 대화와 배려로 협업을 이뤄나가야 한다.
그렇기에 남의 코드를 분석하는 일이 많기도, 몇 달전에 쓴 내 코드도 까먹을 수 있기에 분석하는 시간을 최대한 줄이기 위해서 변수명만 봐더라도 내용이 알 수 있도록 직관적이게 지어야한다.

---

🗒 함수도 마찬가지 더 나아가 내용도 단박에 알 수 있게

1. 함수 이름을 단일 행동을 추상화하게 짓자.

함수 명만 봐도 어떤 동작으로 이루어진건지 알게끔하는 건데, 함수 이름이 길고 복잡하다는 것은 많은 동작이 담겨 있다는 뜻이다, 또한 함수는 되도록 하나의 함수에선
한 가지의 동작을 하는 것을 지향하고 있다.

여러 동작이 담겨있는 코드는 동작하는 흐름을 따라잡기 매우 어려우며 고칠 때도 간단한 한 동작을 고치기 위해서 모든 내용을 다 뜯어야할 때가 많기 때문에 함수를 세분화 해주는 것이 좋다.

2. 함수의 매개변수는 2개 이하가 적당하다.

1. 에선 말한 내용과 이어서 인자가 많다는 것 또한 함수가 담고 있는 내용 즉 동작이 많다는 소리이다.

그리고 매개변수가 3개 이상이면 테스트를 해야하는 경우의 수가 많아져 여러 사례들로 테스트를 해야하기에 매개변수의 개수를 제한 하는 것은 함수 테스팅을 쉽게 만들어 주기 때문에 중요하다.

3. 플래그를 매개변수로 사용하지 말자.

플래그란?

특정 동작을 수행할지 말지 결정하는 (보통 1비트인) 변수

React에선 isToggle 같이 한번 눌렀을 때 true, 또 눌렀을 때 false로 값을 주어 동작을 수행하는 것이라고 생각된다.

이 것 자체가 함수가 한가지 이상의 역할을 하고 있다는 것을 뜻한다. boolean 기반으로 함수가 실행되는 코드가 나뉜다면 함수를 분리하는게 좋다.

4. 전역 함수를 사용하지 말자.

내가 만든 API를 쓰는 유저들은 운영환경에서 예외가 발생하기 전까지는 문제를 인지하지 못할 것이기 때문이다.
또한 다른 라이브러리들에 의해 덮어쓰워지는 경우가 있어 전역 함수로 만드는건 지양한다.

📗 React로 사고하기

공식문서의 목차에 'React로 사고하기'가 있을 정도로 React적인 사고가 중요하다.

🗒 컴포넌트를 단일 책임 원칙을 기반으로 만들자

한 개의 함수에 한 가지 동작을 만드는 것처럼 컴포넌트 또한 한 개의 컴포넌트에 한 가지 역할만 해야한다.
그리고 너무 컴포넌트 내용이 길다는건 많은 내용이 담겨 있으므로 대략 150줄 이상 넘어가면 다시 살펴보며 놔눌 수 있는 것은 나눠야 한다.

🗒 state는 최소한으로 변하는 값만!

state는 오직 상태관리 (화면에 바뀌는 동적인 Data)로만 사용하고 배제할 수 있는 Data는 state로 만들면 안된다.

const [arr, setArr] = useState([]);
const [arrLength, setArrLength] = useState(0); // 절대 ❌

arr.length가 곧 arrLength가 되므로 굳이 불필요한 state를 만들 필요가 없다.

📘 컴포넌트 내 변수 위치

이건 사람, 회사마다 다를 수는 있지만 모든 컴포넌트 내의 변수 위치가 규칙적이면 읽는 사람의 눈도 편하고 불규칙적이라면 하나하나 자세하게 봐야하기 때문에라도 통일성있게 해주는 것이 좋다.

📙 조건부 렌더링에 꼭 삼항연산자만이 답이 아니다

조건부 렌더링이 삼항연산자 뿐만 아니라 &&연산자도 있기에 false 값이 null로 줘야할 경우면 &&연산자로 바꿔보기

const UserData = ({ userData }) => {
  return (
    <>
      {userData
        ? userData.map((data) => (
            <tr key={data.id}>
              <td>{data.id}</td>
              <td>{data.name}</td>
              <td>{data.age}</td>
              <td>{data.address}</td>
              <td>{data.cardNumber}</td>
              <td>{data.userType}</td>
            </tr>
          ))
        : null}
    </>
  );
};

여기에선 userData를 props로 받아 어떤 형태로 올지 모르기 때문에, 부모 컴포넌트에서 어떤 값이든 배열로 만들어서 관리를 해주는게 더 좋다
(map은 배열을 순회하는 메소드이기 때문에 배열로 관리하는게 좋다.)