[Day 48] 2022-0829 : Custom Components, useEffect 복습, Git 협업 Flow

🐈오늘 공부한 것

✔️React Custom Components

styled-components 라이브러리를 활용해 리액트 커스텀 컴포넌트 제작 과제를 실습했다. 오늘 만든 부분은 모달창, 토글버튼, 탭 메뉴 그리고 태그였다. 전체 코드를 적기 보다는 각 컴포넌트를 어떻게 만들었는지 글로 복기해보고 새롭게 알게된 부분을 정리해보겠음.

1. 모달

• 요구 조건 : 버튼 클릭시 모달 창과 모달 배경이 뜨고, 모달 배경 || 모달 창 내의 X 버튼 클릭시 모달이 닫혀야 함.
• 모달이 뜨는 상태와 뜨지 않는 상태 추적을 위해 boolean 값을 담고 있는 state를 만들고, 버튼 클릭시 상태가 변경되도록 onClick 이벤트로 상태변경 함수를 실행시켜주었다.
• attr : 과제 코드에 styled.div.attr( () => <속성> : <속성 값> 이렇게 생긴 코드가 있었는데, html에 어트리뷰트 추가하듯이 컴포넌트를 생성하면서 어트리뷰트를 추가할 수 있다. 여기에 role : 'dialog' 라는 속성이 있었는데, 웹 접근성을 위한 속성으로 요소의 구조나 동작같은 의미정보의 정확한 전달을 위해 사용된다. 
• 조건부 렌더링 : 조건부 렌더링을 할 때 JSX 코드 안에서 {if(조건 blah blah...)} 이렇게 사용할 수도 있고 삼항연산자를 쓸 수도 있는데, && 연산자를 사용하는 방법을 배웠다. 단축 평가도 쓰다보니 편함.

{isOpen && (
    <ModalBackdrop onClick={openModalHandler}>
    <ModalView onClick={e => e.stopPropagation()}>
      <button onClick={openModalHandler}>X</button>
      Hello, codeStates
    </ModalView>
    </ModalBackdrop>
)}

• position : fixed 와 left, right, top, bottom : 0 으로 고정된 전체 창을 만드는 법을 배웠다. 처음엔 전체 창인줄 모르고 그냥 했는데, 이 방법을 사용하면 스크롤이 아무리 길어도 사방이 0으로 고정된 전체 창을 띄울 수 있다. 이걸 활용해서 모달 배경을 생성함.
• 이벤트 버블링 : 부모 요소에 적용된 이벤트 핸들러를 자식 요소도 물려받게 되는 현상이다. 모달 창을 만들었을 때 모달 배경을 클릭하면 닫혀야 하는데, 그 안에 속한 모달 창까지 이벤트 핸들러가 적용된 현상이 있었다. 그게 뭔지 몰라서 둘을 분리하고 z-index로 나누고 별 짓을 다했는데, 라이브세션에서 버블링에 대해서 알려주셨다. 이를 막는 방법으로는 e.stopPropagation() 을 자식 요소에 핸들러로 전달해주면 된다. 

2. 토글

• 요구조건 : 버튼을 클릭하면 동그란 스위치가 좌우로 움직이면서 애니메이션과 색상 변경 효과를 줘야함.
• 토글의 on, off 추적은 isOn state를 등록하여 관리
• 여러개의 클래스 이름 : JSX 문법에서는 클래스 이름을 띄어쓰기로 구분하는데, 동적으로 생성할 때는 {중괄호} 를 사용한다. 하나는 고정된 클래스명이고 다른 하나를 동적으로 생성해줄때는 어떻게 할까? 알아보니 아래와 같은 방법이 있었다. 조건부로 두 번째 클래스를 생성해줄 때 아예 띄어쓰기가 반영된 값을 추가해주면 된다.

<div className={'toggle-container' + (isOn ? ' toggle--checked' : '')} />

3. 탭 메뉴

• 요구조건 : 해당 탭을 클릭하면 현재 탭에 색상이 적용되고, 하단에 어떤 탭을 클릭했는지 정보를 표시해야함
• currentTab state로 현재 클릭된 탭을 index 번호로 추적할 수 있다. 
• onClick 핸들러에 현재 클릭 index 번호 전달해주는 부분이 헷갈렸다. 콜백함수 전달시 괄호를 붙이면 함수가 호출되기 때문에, 이를 화살표 함수에 넣어서 그 안에서 실행해주는 방법이 있다. 공식문서 '이벤트 핸들러 인자 전달하기' 챕터를 보면 된다.

onClick={() => {
  selectMenuHandler(i);
}}

4. 태그

• 요구조건 : 사용자 입력 내용으로 태그 생성, 생성시 입력 값을 체크해 중복과 빈 값은 제외한다. 그리고 태그 삭제.
• useRef를 사용해 input의 current로 접근해 그 value를 공백으로 비워줬는데, 작동은 잘 되지만 문제가 있는지 테스트상 통과가 되지 않아 저렇게 두었다. ㅜ.ㅜ
• 삭제를 할 때 처음에 배열의 splice로 접근을 했는데, filter 메서드로 간단하게 처리할 수 있었다. splice로 현재 인덱스부터 1을 삭제하려고 하니 여러개가 동시에 삭제되는 문제가 있었음... 

✔️useEffect  복습 - clean up 함수

훅을 너무 모르는 것 같아서 useEffect 부터 다시 복습. 

useEffect는 컴포넌트 마운트시 그리고 특정 값이 업데이트 될 때 특정 행동을 하도록 만들 수 있다. API 호출등을 다룰 때 이 안에서 사용할 수 있다. 오늘은 그 부분까지는 보지 않았고 기초적인 내용만 다시 복습했다.

useEffect가 컴포넌트 마운트 직후 그리고 업데이트 직후에 실행되기 때문에, 컴포넌트 언마운트 직전 그리고 업데이트 직전에 실행하기 위해서는 clean up (뒷정리) 함수를 리턴해주면 된다. useEffect의 첫번째 인자인 함수에 마운트&업데이트시 실행될 코드를 작성하고 그 뒤에 return문에서 함수를 리턴해주면, 그 함수 안에 있는 실행코드들이 언마운트 직전 & 업데이트 직전에 실행된다. 

✔️깃 협업 Flow 

이번 알고리즘 스터디에서는 브랜치와 PR을 활용하며 진행하게 되었다. 브랜치 만드는 단계부터 헤매서 스터디장님께 SOS를 부탁드렸는데 잘 설명해주셔서 정리해보려고 한다. 방법은 때에 따라 다를 수 있을 것 같은데 우선 아래와 같이 할 것 같다.

1. 원본 repo 에서 fork 후 로컬로 clone

2. clone 레포에 새 브랜치를 생헝한 후 그곳에서 작업과 커밋을 한다.

3. 모든 업데이트 완료시 clone repo로 push 한 뒤에, 원본 repo에 해당 내용의 PR을 요청한다.

4. merge 가 완료되었을 경우, 내 clone repo와 원본 repo의 상태를 동기화해야하는데 이 작업은 clone repo의 main (|| master...) 브랜치에서 진행한다. 기존에 생성했던 브랜치는 충돌 방지를 위해 삭제한다.

5. 새로운 커밋을 쌓을 때 다시 clone repo에서 브랜치 생성 후 작업한다.

이를 위해 필요했던 깃 명령어는 아래와 같다.

# 새 브랜치 생성 후 바로 이동
git checkout -b <branch name>

# upstream에 원본 repo 등록
git remote add upstream <원본 repo 주소>

🐈더 공부할 것

1. 리액트 훅 : useReducer, useMemo 개념

2. TodoList 삭제기능 구현, styled-components 로 리팩토링 

3. Advanced 과제 마무리 **

🐈오늘의 느낀 점

1. 주말에 추가 작업을 하면서 해결 못했던 투두리스트 체크박스랑 storybook 오류등을 해결했는데, 귀찮아서 블로깅을 안했다(;;) 어느정도 만들어지면 따로 정리해서 깃헙 페이지 배포 및 포스팅을 해봐야겠음. 간단하게 메모해두자면 투두리스트 체크박스가 제대로 동작 안했던 이유는 useEffect 의 의존성 배열을 제대로 체크해주지 않았기 때문이었다. 의존성 배열에 다른 요소들이 들어가있으니 todoList를 업데이트하는 set 함수가 무한 렌더링이 되는 현상이 발생했던 것이다. 어찌 고치긴 했는데 useEffect를 여러번 쓰는게 맞는지도 잘 모르겠고 더 좋은 방법이 있을 것 같아 지속적으로 개선하려고 함. 또 storybook은 styled-components 설치 과정에서 오류가 있었던 것 같아 전체를 지우고 다시 진행했다. storybook이 현업에서 많이 쓰이는지 궁금했는데, 지금 당장 활용할 수 있는것은 만든 ui 컴포넌트 한눈에 보여줄 수 있는 포트폴리오 정도? 규모가 크면 유용하지만 사용하지 않는 경우도 많다고 함.

 

2. 페어분이 몸이 안좋으셔서 과제를 혼자 진행했다. 내일도 혼자 할 것 같은데 혼자 한 것 치고는 오늘 목표였던 베어미니멈까지 꽤 수월하게 끝낼 수 있었다. 다만 혼자하니 모르는 것을 찾다가 서핑도 하고 늘어지기도 하고 좋지만은 않았다. 편한 것도 있었긴 하지만... 

 

3. 이제 집에서 밥을 해먹으려고 한다. 오늘 된장찌개를 끓였는데, 개인적으로 처리할 일이랑 저녁식사 준비까지 마치니까 공부를 시작할 때 벌써 9시 가까이 되어버렸다. ㅜㅜ 정규 시간은 6시에 끝났는데 중간에 3시간이나 떠버린 셈이 되었다... 그렇다고 밥을 안해먹을 수는 없는 노릇인디 사먹자니 끝이 없고 시간은 촉박하고 ; ㅅ ;