2주차 미션 : React-todo

CEOS의 두번째 스터디! 1주차에 바닐라 js로 짠 투두리스트를 react로 리팩토링하기!!!!

 

1주차에 바닐라로 짜면서, 와 난 react로 편하게 살았더니 이렇게 자바스크립트를 못하네...?라는 생각을 했었는데,

이번 주차에 react로 리팩토링하면서 느낀 것은, react도 그닥 잘하진 않네... 였다. 아직 갈 길이 멀다.

 

일단 먼저, 이번 주차의 스터디 목표는 다음과 같다.

미션 목표를 본 후에 바로 react로 투두리스트 짜기에 돌입했다.

 

프로젝트 진행 중 힘들었던 부분

1. map을 쓸 때는 괄호에 주의하자.

이번에 제일 에러를 찾기도 힘들었고, 에러를 찾고나서도 현타가 왔던 부분은

 

{doingList.map((list) => (
            <RowContainer>
              <TodoText onClick={() => moveList(doingList, list.id, list.text)}>
                {list.text}
              </TodoText>
              <DeleteButton
                onClick={() => {
                  removeList(doingList, list.id);
                }}
                src={deleteImg}
              />
            </RowContainer>
          ))}

 

와 같이 doingList에 있는 text들을 리스트에 쭉 뽑아주어야하는데, 그 중 

 

 {doingList.map((list) => (

이 첫번째 줄의 마지막 괄호를 ( 가 아닌 { 로 써버려서 텍스트가 전혀 호출이 되지 않았었다...

심지어 뒤에 붙이는 괄호도 } 로 똑같이 중괄호로 닫아버려서 에러창이 딱히 뜨는 것도 아닌데 텍스트 호출은 되지 않는... 그런 아주 미친 상황이었다. 학교에서 친구들이랑 노트북 켜놓고 과제를 하는데, 너무 모르겠어서 친구랑 막 코드 비교하면서 들여다보고 막 그랬는데...

 

친구가 map을 사용한 다른 레퍼런스 코드를 보더니, 여기 괄호가 다른데? 라면서 알려줬던...

역시 코드는 내 코드는 콩깍지가 씌여가지고 다 잘 짠 것 같은데 남이 보면 뭐라도 찾아낼 수 있게 되는...

친구가 최고다:)

 

2.  사용자가 투두리스트 하나 완료할 때마다 불꽃놀이 효과 추가

 

바닐라 자바스크립트에서는 

celebrate.style.display = 'block';

  setTimeout(() => {
    celebrate.style.display = 'none';
  }, 2000);

와 같이 불꽃놀이 gif의 style을 직접 변화시켜줄 수 있었는데,

 

리액트에서는 

const Celebrate = styled.img`
  display: block;
  position: absolute;
  height: 30rem;
  width: 30rem;
`;

와 같이 지정한 스타일을 직접 바꿔줄 수 없어서 한참 고민했다...

 

그러다가!!!!!! 모달창을 열고 닫을 때, 사용자의 동작에 따라 모달창이 보이다가 안 보이다가 하던 것이 생각났다.

그래서 바로 모달창과 관련된 레퍼런스를 찾아서 코드를 뚱땅거렸다.

결과는 다음과 같다.

 const [finish, setFinish] = useState(false);
 
 // listname에서 다른 리스트로 요소 이동
 const moveList = (listname, id, text) => {
    if (listname == doingList) {
      setFinish(true);
      setTimeout(() => {
        setFinish(false);
      }, 1000);
      // ... 생략
    } else if (listname == doneList) {
    // ... 생략
    }
  };
  
 return (

// ... 생략

{finish ? <Celebrate src={firework} /> : <></>}

)

 

모달창을 finish==true 일 때만 띄워주는 코드이다.

이 finish의 상태는 moveList에서 리스트가 doingList -> doneList로 이동할 때만 1초간 false로 바뀌게 코드를 짰다.

 

이렇게 완성된 코드는, https://github.com/0909oje/react-todo-16th/tree/jieun 에서 확인할 수 있다.

vercel로 배포한 화면은, https://react-todo-jieun.vercel.app/ 에서 볼 수 있다.

 

Key Questions

하지만 배포에서 나의 스터디는 끝나지 않는다...! key Questions의 답도 적어야하기 때문...

key questions는 다음과 같다.

 

 

1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?

React의 장점 중 하나로, 말 그대로 가상의 DOM이다.

DOM이란 1주차 스터디에서 정의한대로 웹 브라우저가 HTML 페이지를 인식하는 방식인데,

이런 DOM의 가상 구조를 만듦으로써 일종의 오프라인 DOM 트리에 변화들을 적용한 뒤 그 변화를 하나로 묶어서 실제 DOM에 전달하기 때문에 연산 횟수가 줄어들고 변화에 대한 비용이 비교적 작다.

 

2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?

html, css, js를 따로따로 정의할 필요없이 js 파일 하나로 모든 동작을 구현할 수 있어서 편하다.

끊임없는 querySelector, createElement 의 늪에서 벗어날 수 있어서 편하다.

 

3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?

상태란, 컴포넌트의 변경 가능한 데이터 저장소다.

이런 상태를 변경하기 위해서 react에서는 useState를 사용하고

상태를 관리하기 위해서는 context API, redux 등을 사용한다.

 

4. Styled-Components 사용 후기 (CSS와 비교)

css를 쓸 때는 따로 css 파일에 스타일을 정의해놓고 html이나 js에서 난 css에서 이런이런 스타일을 가져올거야~ 하고 따로 써줘야하는데, styled-components를 쓰면 이 컴포넌트는 이런 스타일을 가지고 있어. 하고 정의해놓고 후에 컴포넌트 태그로만 감싸주면 스타일이 알아서 적용돼서 너무 편하다..

 

이번 스터디도 역시... 반성할 것도 공부할 것도 많았다.

다음주는 타입스크립트로 코드를 짜야한다던데 어카지.. 일단 가보자고~