[React]코드 리팩토링 체끄체끄

복잡한 알고리즘을 사용하여 쓰는것 보다,기본적인 것들을 잘 지킨 누가봐도 잘 읽고 이해할 수 있는 코드가 좋은 코드

1. 컴포넌트와 className 통일

• SPA인 리액트는 컴포넌트를 나누더라도 결국 하나로 합쳐지기 때문에 태그이름을 사용하여 스타일을 적용할 경우, 다른파일의 요소에 영향을 줄 수가 있다. 때문에 스타일을 줄 태그에 className을 지정해 주는 것이 좋은데, 이때 컴포넌트와 className을 동일하게 지정하면 나중에 컴포넌트가 많아지더라도 가독성 ↑.

2. 구조분해 할당(destructuring)

• 객체/배열에 적용하여 코드를 보다 간결하게 사용할 수 있음
  구조분해할당 관련 포스팅!
  객체구조분해 할당

const Login = () => {
  const [userInfo, setUserInfo] = useState({
    email: '',
    password: '',
  });
  const saveUserInfo = event => {
    const { name, value } = event.target;
    setUserInfo({ ...userInfo, [name]: value });
  };
  	    <form className="flex form">
          <input
            name="email"
            className="pwAndId"
            value={userInfo.email}
            onChange={saveUserInfo}
          />
          <input
            name="password"
            className="pwAndId"
            value={userInfo.password}
            onChange={saveUserInfo}
          />
          <button
            className={`loginbtn ${!IsValid ? 'disabled' : ''}`}
            disabled={!IsValid}
            onClick={checkLogin}
            type="submit"

             로그인
          </button>

3. console.log 삭제

코드를 작성하다가 테스트용으로 console을 찍어보는 경우가 많은데, 테스트가 완료된 이후에 지워주는 것이 좋음.
VScode의 검색탭으로 검색가능

4. 주석 삭제

참고용으로 주석을 작성하는 경우, 리팩토링을 할때 삭제를 해주는 것이 좋다. 만약 나중에 사용을 하기 위하여 남겨두는 경우 아래와 같이 설명을 써두어 다른사람도 주석의 의미를 알아볼 수 있게 해 주는 것이 좋음

 // TODO: 이후 경로설정이 확정된 후 재사용 예정
  // 주석내용

// FIXME: 이후 재검토예정
// 주석내용 

4. 컴포넌트명을 파스칼케이스로

리액트에서는 컴포넌트명을 파스칼케이스로 작성을 해야하며 나머지 className이나 함수명 등은 프로젝트를 하는 팀내에서 하나로 통일하는것을 추천.

5. 한 함수에 한가지 기능만 추가.

//X 
const saveAndChangeInputValue=() =>{} 
// O
const saveInputValue=() =>{} 
const changeInputValue=() =>{}

6.boolean 값을 리턴한다면 함수대신 변수로 선언가능

const isValid = () =>{userInfo.length > 6} // boolean 값을 리턴
const isValid = useInfo.length>6 //	변수로 선언