[1차 프로젝트] Westagram clone -코드리뷰 [Main page]

Bad point

1. 불필요한 fragment

My code

  render() {
    const { commentBox, isHeartChange, changeHeartColor } = this.props;
    return (
      <>
        <ul>
          {commentBox.map(comment => (
            <li key={comment.id}>
              <div>
                <span>{comment.userId}</span>
                {comment.content}
              </div>
              <button onClick={changeHeartColor}>
                <img
                  alt="checkingHeart"
                  src="../../images/seyeonPark/heart.png"
                  width="12px"
                  className={isHeartChange ? 'likeHeart' : 'unlikeHeart'}
                />
              </button>
            </li>
          ))}
        </ul>
      </>
    );
  }
}

리팩토링

  render() {
    const { commentBox, isHeartChange, changeHeartColor } = this.props;
    return (
        <ul>
          {commentBox.map(comment => (
            <li key={comment.id}>
              <div>
                <span>{comment.userId}</span>
                {comment.content}
              </div>
              <button onClick={changeHeartColor}>
                <img
                  alt="checkingHeart"
                  src="../../images/seyeonPark/heart.png"
                  width="12px"
                  className={isHeartChange ? 'likeHeart' : 'unlikeHeart'}
                />
              </button>
            </li>
          ))}
        </ul>
    );
  }
}

2. 기본값 'GET'은 생략 가능

My code

  componentDidMount() {
    fetch('http://localhost:3000/data/feedDataSeyeon.json', {
      method: 'GET',
    })
      .then(res => res.json())
      .then(data => {
        this.setState({ feedList: data });
      });
  }

리팩토링

  componentDidMount() {
    fetch('http://localhost:3000/data/feedDataSeyeon.json')
      .then(res => res.json())
      .then(data => {
        this.setState({ feedList: data });
      });
  }

Good point

1 적절한 구조분해할당

class LoginBox extends React.Component {
  render() {
    const { onChange, changeBtn, inputIdValue, inputPwValue } = this.props;

2. if문으로 특정조건인 경우, 바로 Return

  uploadComment = () => {
    const { commentBox, comment } = this.state;
    if (comment.length === 0) return;

3. 불변성을 지키면서 spead 연산자 사용

    const newCommentBox = [
      ...commentBox,

---

---

---

🙋🏻‍♀️Today,

사실 Mock data를 구현 중에 코드도 많이 바뀌고 컴포넌트화하던 중에 일이 생겨 전날 PR 한 것을 토대로 코드리뷰를 받았다.

코드리뷰를 받은 것을 하나하나 보고, 놓친 부분도 많아 깨달은 점이 많다.
그리고 아직 적용하지 못한 부분도 있다.

그런데 나름 칭찬 받은 부분이 있어 뿌듯하고, 감사했다.