React로 옮기면서 지적받은 코드에 대해 고치는 시간!!
toggleLike = () => {
this.state.toggleLike ? this.setState({ toggleLike: false }) : this.setState({ toggleLike: true });
};
toggleLike = () => {
this.setState({ toggleLike: !this.state.toggleLike });
};
최대한 줄일 수 있는 코드는 줄이자.. 그렇다고 너무 가독성이 떨어지게 하지는 말고..음?? 😊
<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을 중복되는 것을 이렇게 뺄 수도 있구나 자주 애용하도록
()
중요 감싸줘야함!!
<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
수정완료
login
,password
입력창에 값이 들어오게 되면로그인 버튼
의 색상을 변경할려고 따로toggleLoginBtnCheck :
변수를 줬었는데logindId
,loginPw
state만으로 구현이 가능한 로직이었다.. 생각해보니toggleLoginbtnCheck
라는 것을 바꿔주기 위해 10줄 이상의 코드를 더 사용했었다 (함수까지 만들다보니..) 1줄로 비교만 하면 끝나는 것을... 생각하면서 코딩하자!!🤫
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
순서 정리