[1차 프로젝트] 코드 리뷰 받은 후, 수정한 코드 1

1.

super();
this.state = {
  memberId: "",
  memberPasswd: "",

• 이름은 간결하게

super();
this.state = {
  memberId: "",
  memberPw: "",

2.

  handleClick = (e) => {
    const { memberId, memberPasswd} = this.state
    if( memberId.length < 1) {
      alert("아이디 항목은 필수 입력값입니다.")
    } else if ( memberPasswd.length < 4) {
      alert("패스워드 항목이 4자(개) 이상으로 해주십시오.")
    }
  }

• 불필요한 인자 제거
• if 내 소괄호 좌우 공백 제거
• if문 조건식 간단하게 만들기
• !이나 !!을 붙여 해당 값이 boolean 이라는 사실을 명시할 수 있다.
• if 문 이후의 실행 문장이 한줄일 경우에 한하여 한줄로 써줄 수도 있다.

  handleClick = () => {
    const { memberId, memberPw } = this.state
    if (!memberId.length) alert("아이디 항목은 필수 입력값입니다.")
    else if ( memberPw.length < 4) alert("패스워드 항목이 4자(개) 이상으로 해주십시오.")
  }
  // 클론하는 로그인 홈페이지에 맞게 적용하였음.

3.

enterValue = (e) => {
  const { memberId, memberPasswd} = this.state
  if (e.key === "Enter") {
    if( memberId.length < 1) {
      alert("아이디 항목은 필수 입력값입니다.")
    } else if ( memberPasswd.length < 4) {
      alert("패스워드 항목이 4자(개) 이상으로 해주십시오.")
    }
  }
}

• 구조 분해 할당 시 양쪽 다 한칸 공백 처리.
• 조건에 부합하지 않을 경우 실행할 내용이 없는 경우라서 if문을 중첩하기보다 return으로 함수를 바로 빠져나가는 방법이 좋다.

  enterValue = () => {
    const { memberId, memberPw} = this.state
    if (e.key !== "Enter") return
    if(!memberId.length) alert("아이디 항목은 필수 입력값입니다.")
    else if (memberPw.length < 4) alert("패스워드 항목이 4자(개) 이상으로 해주십시오.")
  }
  // 클론하는 로그인 페이지에 맞게 적용하였음.

4. SASS: 속성 재배치

.loginBtnBlack {
  margin-top: 80px;
  background-color: var(--black-color);
  color: var(--white-color);
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 38px;
  height: 40px;
  width: 100%;
  border: none;
  outline: none;
  cursor: pointer;
}

레이아웃에 영향을 주는 속성일 수록 중요하다.
아래 내용 참고하셔서 순서 재배치하기!

• Layout Properties (position, float, clear, display)
• Box Model Properties (width, height, margin, padding)
• Visual Properties (color, background, border, box-shadow)
• Typography Properties (font-size, font-family, * text-align, text-transform)
• Misc Properties (cursor, overflow, z-index)

.loginBtnBlack {
  width: 100%;
  height: 40px;
  margin-top: 80px;
  color: var(--white-color);
  background-color: var(--black-color);
  border: none;
  outline: none;
  font-size: var(--font-small);
  font-weight: 700;
  line-height: 38px;
  cursor: pointer;
}

5. SASS: 불필요한 주석 삭제

li {
  border: 2px solid var(--black-color);
  // width: 49%;

li {
  border: 2px solid var(--black-color);

6. SASS: box-sizing: border-box 남용

font-size: var(--font-small);
font-weight: 700;
border: 2px solid var(--black-color);
box-sizing: border-box;

• 제거해도 변화가 없는 이유는 버튼의 두께 차이가 없기때문에. 그래서 불필요!

참고하기

font-size: var(--font-small);
font-weight: 700;
border: 2px solid var(--black-color);

7. SASS: & 연산자와 nesting 활용하기

input {
  width: 100%;
  height: 35px;
  padding: 9px 2px 2px 0;
  border: none;
  outline: none;
  font-size: var(--font-micro);
}

input::placeholder {
  color: #9e9e9e;
  font-size: var(--font-medium);
  font-weight: 700;
}

• 와... 신기하다.
  참고하기

input {
  width: 100%;
  height: 35px;
  padding: 9px 2px 2px 0;
  border: none;
  outline: none;
  font-size: var(--font-micro);

  &::placeholder {
    color: #9e9e9e;
    font-size: var(--font-medium);
    font-weight: 700;
  }
}

8. 셀프 클로징 태그 적용하기!

<label className="loginBoxDesc">
  <input onKeyUp={this.enterValue} onChange={this.handleInput} id="memberId" name="memberId" type="text" placeholder="아이디를 입력해주세요."></input>
</label>

<label className="loginBoxDesc">
  <input onKeyUp={this.enterValue} onChange={this.handleInput} id="memberId" name="memberId" type="text" placeholder="아이디를 입력해주세요."/>
</label>

9. label 태그 안에 있는 input 태그의 id, htmlFor

<label className="loginBoxDesc">
  <input onKeyUp={this.enterValue} onChange={this.handleInput} id="memberId" name="memberId" type="text" placeholder="아이디를 입력해주세요."/>
</label>

• label 태그로 input 태그를 감싸면 id와 htmlFor가 불필요하다.

<label className="loginBoxDesc">
  <input onKeyUp={this.enterValue} onChange={this.handleInput} name="memberId" type="text" placeholder="아이디를 입력해주세요."/>
</label>

10. 최상위 태그 클래스명

<div>
  <div className="loginTitle">

• 필요없는 태그는 제거!
• 최상위 태그의 클래스명은 컴포넌트명과 같게 작성해주자!

class Login extends React.Component {
  constructor() {
    super();
    this.state = {
      memberId: "",
      memberPw: "",
    }
  }
  
...

render() {
    return (
      <div className="Login">
        <div className="titleAnimation">
          <h2>LOGIN</h2>

11. 줄바꿈

<span className="snsBg"><img src="https://rawrow.com/web/upload/mundane/login_kakao.png" alt="카카오계정 로그인"/></span>
<span className="snsText">kakao login</span>

• 태그 간 부모 자식 관계가 잘 드러날 수 있도록 줄바꿈하기

<span className="snsBg">
  <img src="https://rawrow.com/web/upload/mundane/login_kakao.png" alt="카카오계정 로그인"/>
</span>
<span className="snsText">kakao login</span>

12. 불필요한 속성 제거

article {
  position: relative;
  max-width: 420px;
  margin: 0 auto;

• article 태그에 대해서 left, top 등의 속성이 적용되어 있는 것이 없고, 하위요소에도 absolute 등의 속성이 부여되어 있지않았다. 불필요한 속성은 제거하자.

article {
  max-width: 420px;
  margin: 0 auto;

13. border 더 좋은 방법

border: 2px solid #111;
border-left: none;
border-right: none;

• 이게 더 낫지 않을까?

border-top: 2px solid #111;
border-bottom: 2px solid #111;

14. display: block; 과 width: 100%

.loginBoxDesc {
  display: block;
  width: 100%;

• display block과 width 100%가 동시에 들어가지 않아도 된다.

15. Sass를 사용한다면 nesting을 사용하기때문에 클래스명은 짧게!!!

<div className="loginBox first">
  <span className="loginBoxTitle">아이디</span>
  <label className="loginBoxDesc">
    <input onKeyUp={this.enterValue} onChange={this.handleInput} name="memberId" type="text" placeholder="아이디를 입력해주세요."/>
  </label>
</div>
<div className="loginBox">
  <span className="loginBoxTitle">비밀번호</span>
  <label className="loginBoxDesc">
    <input onKeyUp={this.enterValue} onChange={this.handleInput} name="memberPw" type="text" placeholder="비밀번호를 입력해주세요."/>
  </label>
</div>

• nesting을 이용하니까 클래스명이 길어지지않아도 된다!

<div className="loginBox first">
  <span className="title">아이디</span>
  <label className="desc">
    <input onKeyUp={this.enterValue} onChange={this.handleInput} name="memberId" type="text" placeholder="아이디를 입력해주세요."/>
  </label>
</div>
<div className="loginBox">
  <span className="title">비밀번호</span>
  <label className="desc">
    <input onKeyUp={this.enterValue} onChange={this.handleInput} name="memberPw" type="text" placeholder="비밀번호를 입력해주세요."/>
  </label>
</div>