TIL: 2022-10-28

⚙️ 오늘 배운 주제

React로 custom component 만들기

 

🐹 오늘의 기분

어제 새로운 걸 너무 많이 배워서 오늘 과제를 잘 할 수 있을지 걱정이었다. 게다가 완전 아침부터 하루 종일 과제만 하는 거라 '얼마나 어려운 과제길래.. '하는 생각이 절로 들었음. 혼자 했으면 엄청 헤맸을 것 같다. 내가 모르는 부분은 페어분이 아시고, 나도 내가 아는 부분을 페어분께 알려드릴 수 있어서 과제가 생각했던 것보다 빨리 끝났다. 과제는 당연히 어려웠고 예상치 못한 곳에서 자주 막혔지만 오류의 원인을 찾고 해결하면서 컴포넌트를 완성해나가는 과정이 재미있었다. 주말에는 이번 과제를 진행하며 부족하다고 생각했던 CSS 개념을 제대로 보충해볼 생각이다.

 

🗣 과제 되돌아보기

오늘 과제에서는 모달, 토글, 탭, 태그 이렇게 총 네 개의 커스텀 컴포넌트를 만들었다.
과제 코드를 올릴 수는 없어서 각 컴포넌트를 만들며 중요하게 느꼈던 부분을 되돌아보려고 한다.

 

1. Modal.js

모달 박스 안에서만 모달이 띄워져야 하는 줄 알았는데 라이브세션을 보니 화면 전체에 모달을 띄우는 것이었다(!)
컴포넌트의 부모 자식 관계를 잘 따져야겠다는 생각을 했다. 과제할 때 기능 구현은 전부 다 했는데 맨 마지막 테스트케이스에서 자꾸 통과가 안 됐다.
알고 보니 테스트 코드에서는 ModalBackdrop 컴포넌트를 ModalView 컴포넌트의 부모로 잡아내고 있었는데 우리가 작성한 코드에서는 두 컴포넌트를 부모-자식이 아닌 형제 관계로 렌더링해서 그런 것이었다.

그리고 과제 시간에는 차마 발견하지 못했던 또 다른 문제가 있었다.

모달 바깥을 클릭하면 잘 닫히는데, 모달 창의 여백을 눌러도 창이 닫혀버리는 것이다.

이런 현상을 이벤트 버블링이라고 한다.

이벤트 버블링을 해결하는 방법으로 stopPropagation이 있다. 이벤트를 전파받는 컴포넌트에 콜백함수로 (event) => event.stopPropagation()를 전달해주면 된다.

  <ModalBackdrop onClick={openModalHandler}>
    <ModalView onClick={(event) => event.stopPropagation()}>
      Hello Codestates
    </ModalView>
  </ModalBackdrop>

이제 더 이상 모달 창의 여백을 클릭해도 창이 닫히는 상황이 발생하지 않는다.

 

2. Toggle.js

토글에서는 테스트를 다 통과했는데 CSS가 전혀 안 먹히는 상황이 발생했다 😭
이번에는 셀렉터 부분이 문제였다. 셀렉터 중에서 >, & 같은 걸 더 공부해야겠다는 생각이 절로 들었다.

 

3. Tab.js

state의 상태 변경 함수에 전달인자를 넣는 것이 포인트였다.
원래 컴포넌트의 이벤트에 함수를 전달하려면 함수명만 전달해야 한다.
여기서는 인덱스를 전달인자로 넣어주여야 했는데 찾아보니 이벤트에 콜백함수를 쓰고 그 함수 안에 전달인자를 넣은 상태 변경 함수를 쓰면 된다.

    <li
    className={isFocused}
    onClick={() => {
      selectMenuHandler(el.index);
    }}
    </li>

 

4. Tag.js

베어미니멈 마지막답게 가장 까다롭게 느껴졌던 컴포넌트이다.
removeTags 함수에서 필터를 tags 배열로 돌아야되는데 initialTags에서 돌아서 뭐가 원인이지?하고 한참 헤맸었다 ㅠㅠ ㅋㅋㅋㅋㅋ 이거 깨달았을 때 머리 쥐어뜯었다...

테스트 중 'Enter키를 누르면 실제 태그가 추가되어야 합니다'에서 자꾸 통과가 안 됐었다. (다른 기능은 다 잘 됨...)
엔터를 늘렀을 때 상태 변경 함수 addTag 가 실행되면 태그가 추가된다. 그 후에 자동으로 input을 비우기 위해 event.target.value를 빈 문자열로 바꿔주는 코드를 넣었는데 이게 원인이었다. 그 줄만 딱 지우니까 통과가 됐음. 근데 이러면 input이 안 비워져서 과제에서 의도하는 바와는 달라졌다.
input을 따로 또 state로 관리해주어야 테스트도 통과하고, 태그 추가 후 input도 제대로 비울 수가 있었다. 어떤 분의 블로그 포스팅이 아니었다면 평생 원인을 못 찾았을 듯하다...

 

💡 느낀 점

기존 과제들은 CSS가 기본적으로 다 짜인 채로 제공되어서 기능 구현에만 집중하면 됐었는데, 오늘 과제는 CSS도 우리가 직접 구현해야 했다. 그 동안 CSS를 손댈 일이라고는 블로그 스킨밖에 없었어서 그런지 정렬이나 이런 것들이 너무 새롭게 느껴졌다. flex는 숙명의 과제다,, 언제쯤 익숙하게 써먹을까?ㅠ
페어분께서 CSS를 능숙하게 잘 다루셔서 빠르게 구현할 수 있었다 👍 동시에 나에게 CSS 지식이 많이 부족하다는 걸 실감했다. 오늘 처음 보는 속성도 꽤 있었어서 이건 따로 또 노트에 정리해서 백링크 걸어둬야겟다.
useState도 계속 쓰다보니 점점 익숙해졌다. useState를 쓸 때와 useRef를 써야할 떄를 잘 구분하는 것도 중요하겠다는 생각을 했다.

스토리북을 실행해보지 않아서 이것도 좀 들여다봐야겠다.

 

🔎 공부가 더 필요한 부분

이벤트 버블링, stopPropagation
css position
top, left, bottom, right 등
css selector