Project Day 5 - 개발일지

hwibaski·2021년 10월 6일

목록 보기

5/10

- TODAY I LEARN 🎁

- 배운점

장현님에게 코드 리뷰를 받았고, 많은 내용이 있었지만 특히 인상적이였던 내용을 정리해보고자 한다.

event.target.src, event.target.className 으로 img태그의 속성값 혹은 클래스이름을 가져올 수 있다.

event.target 객체 안에는 생각보다 많은 정보들이 들어있는 것 같다. 대충 봤었는데 자세히 살펴볼 필요가 있을 것 같다.

🧪 map() 메소드 내에서 구조분해 할당하기

...code
{sortOptionData.map(menu => {
              return (
                <SortOption
                  isChecked={menu.isChecked}
                  key={menu.id}
                  name={menu.name}
                  id={menu.id}
                  handleCheckIcon={this.handleCheckIcon}
                />
              );
            })}
//------------------------------------------------------------
위의 코드를 아래처럼 바꿀 수 있다.

{sortOptionData.map(menu => {
	const {isChecked, id, name} = menu
              return (
                <SortOption
                  isChecked={isChecked}
                  key={id}
                  name={name}
                  id={id}
                  handleCheckIcon={this.handleCheckIcon}
                />
              );
            })}
... code

🧪 누가봐도 알아볼 수 있을만한 코드로 작성하기

handleScroll = () => {
    const { prevScrollPos } = this.state;
    const currentScrollPos = document.body.getBoundingClientRect().top;
    this.setState(state => {
			// if의 조건을 보면 현재의 스크롤의 위치를 10으로 나누고 있다. 
			// 개발한 사람이야 왜 나누는지 알겠지만 동료들이나 처음 코드를 본 사람은 스크롤을 왜 나눠?
			// 라고 생각을 할 수 있다. 그러므로 알아보기 쉬운 변수로 바꿔주는 것이 유지보수성이 좋다.
			// 추후에 누가 이 코드를 보고 나한테 물어보는 일도 없겠지?
      if (currentScrollPos % 10 === 0) {
        return {
          prevScrollPos: currentScrollPos,
          isNavVisible: currentScrollPos >= prevScrollPos,
        };
      }
    });
  };

🧪 Boolean타입을 이용한 코드 간소화

class SortOptionBox extends Component {
  state = {
    sortOptionData: [
      { id: 1, name: 'Recent', isChecked: false },
      { id: 2, name: 'Price (Low)', isChecked: false },
      { id: 3, name: 'Price (High)', isCheckd: false },
      { id: 4, name: 'Trending', isChecked: false },
    ],
  };

  handleCheckIcon = id => {
// sortOptionData => sortOption으로 바꾸기 Data는 아니잖아?
    const { sortOptionData } = this.state;
    const newSortOptionData = [...sortOptionData];
//-----------point to refactor-----------------------
    newSortOptionData.forEach(data => {
      if (data.id === id) {
        data.isChecked = true;
      } else {
        data.isChecked = false;
      }
    });
//----------------------------------------
    this.setState({ sortOptionData: newSortOptionData });
  };
...more code ...

/*
코드 전체의 흐름을 잘 이해하기 위해 state도 가져왔습니다.
handleCheckIcon은 하위 컴포넌트에서 id값을 받아와서 state의 sortOptionData의 각각의
객체의 id와 비교를 합니다. 그리고 비교한 아이디의 값이 같을 시 isChecked를 true로 아니면
false로 바꿉니다. 
코드의  흐름은 이렇고 `point to refactor`안의 코드를 간단하게 바꿀 수 있습니다.
*/
---------------------------------------------------------------------
newSortOptionData.forEach(ata => data.isChecked = data.id === id)
---------------------------------------------------------------------
// data.id === id라는 조건 자체가 true, false를 가지게 되므로 굳이 분기처리하지 않고
// data.isChecked에 할당을 해주면 됩니다.