[westagram] react 코드리뷰!

Chanho Yoon·2021년 3월 10일
0

westargram

목록 보기
9/11
post-thumbnail

코드리뷰

React로 옮기면서 지적받은 코드에 대해 고치는 시간!!

수정한 것들⚙️

✅ 줄일 수 있는 코드는 줄이자

  toggleLike = () => {
    this.state.toggleLike ? this.setState({ toggleLike: false }) : this.setState({ toggleLike: true });
  };

  toggleLike = () => {
    this.setState({ toggleLike: !this.state.toggleLike });
  };

최대한 줄일 수 있는 코드는 줄이자.. 그렇다고 너무 가독성이 떨어지게 하지는 말고..음?? 😊

✅ class name 중복되는 것은 따로 빼서 사용하자

<button className={toggleLike ? 'comment-like-btn like-scale-action-out' : 'comment-like-btn like-scale-action-in'} onClick={this.toggleLike}>

<button className={'comment-like-btn' + (toggleLike ? ' like-scale-action-out' : ' like-scale-action-in')} onClick={this.toggleLike}>

class name을 중복되는 것을 이렇게 뺄 수도 있구나 자주 애용하도록 () 중요 감싸줘야함!!

✅ inline style은 지양하자

<i className={toggleLike ? 'fas fa-heart' : 'far fa-heart'} style={toggleLike ? { color: `red` } : { color: 'black' }}></i>

<i className={toggleLike ? 'fas fa-heart like-btn-red' : 'far fa-heart like-btn-black'}></i>

인라인 스타일은 지양해야한다. 그 이유는 새로운 객체로 인식해서 계속해서 렌더링하기 때문!!

✅ 급하다고 생각없이 막코딩 하지말자

.channel-name {
      font-weight : bold;
      color       : black;
      &:hover {
         cursor : pointer;
      }
   }
   
.channel-name {
     font-weight : bold;
     color       : black;
     cursor      : pointer;
}

생각없이 cursor:pointer를 주면 끝나는데 굳이 :&hover를 줬는데 왜 그랬는지 모르겠다.. 앞으론 주의하자!! 이렇게 작성한 .scss 수정완료

✅ state에 대한 고민..1

login,password 입력창에 값이 들어오게 되면 로그인 버튼의 색상을 변경할려고 따로 toggleLoginBtnCheck : 변수를 줬었는데 logindId,loginPw state만으로 구현이 가능한 로직이었다.. 생각해보니 toggleLoginbtnCheck 라는 것을 바꿔주기 위해 10줄 이상의 코드를 더 사용했었다 (함수까지 만들다보니..) 1줄로 비교만 하면 끝나는 것을... 생각하면서 코딩하자!!🤫

✅ state에 대한 고민..2

this.state.loginId ? this.setState({ toggleLoginIdInput: true }) : this.setState({ toggleLoginIdInput: false });
this.state.loginPw ? this.setState({ toggleLoginPwInput: true }) : this.setState({ toggleLoginPwInput: false });
    
this.setState({ toggleLoginIdInput: this.state.loginId });
this.setState({ toggleLoginPwInput: this.state.loginPw });

코드리뷰를 받으면서 뭔가 조금 더 생각하면서 코딩을 해야겠다고 생각한다...😭😀

✅ 변수명 의미있게

 handleLikeUpdate = ( id, data ) => {
    const { mainContentObj } = this.state;
    this.setState({
      information: mainContentObj.map(( list ) => (
        id === list.id ? { ...list, ...data } : { list } )
      )
    });
  };

handleLikeUpdate = ( id, liked ) => {
  ...
}

data 가 아닌 Update 하려는게 뭔지 알 수 있도록 직접적인 변수명 사용

간단히 수정한 것들

  • 불필요한 빈 태그 제거
  • 달라지는 클래스 부분만 삼항연산자를 사용해서 분리
  • import순서 정리

0개의 댓글