React Momentum!

Basic Web Hiring Assessment가 끝나고 3일동안 솔로데이가 시작됐다.

이번 솔로데이 큰 목표중 하나는 React로, 다음 스프린트를 시작하기 전에
함수형 컴포넌트(와 Hooks!) 그리고 Redux의 사용에 더 익숙해지도록 계획을 세웠다.

가장 먼저 무엇을 해야하나 생각중, JS를 처음 배우며 따라했던 Momentum이 생각났다. Nomad Coder를 보며 클론코딩한 내용인데, 올해 초쯤 HTML, CSS 카카오톡 클론코딩을 마치고 호기롭게 시작했다가 따라쳐서 완성을 했지만 사실 명확하게 이해를 하지 못했었다. 그 상태로 업무가 바빠지면서 코딩을 연속적으로 공부하지 못했었다가, 코드스테이츠 프리과정을 보내면서야 아, 그때 배웠던 내용이 이런 내용이었구나 하고 깃헙을 열어보고 늦게나마 큰 도움을 받았다.

동일한 내용을 리액트로 다시 만들면서 집중할 포인트는 다음 두가지였다.

• React Component구조를 생각하면서 만들기
• 함수형 컴포넌트로 Hooks의 사용법을 충분히 생각하기

오늘은 충분히 리액트에 집중했기때문에 Redux를 통한 상태관리는 혼란을 초래할까 일부러 제외했다. 리덕스는 금요일에 작은 미니프로젝트를 진행하며 학습할 계획.

결과물을 살펴보면, 먼저 이것이 JS with DOM으로 작업한 Momentum

• Vanila JS로 만든 Momentum
  

그리고 이 아래가 리액트로 만든 Momentum

• React로 만든 Momentum
  

시작할때는 반나절이면 되지 않을까 했는데 익숙치 않았고 중간중간 부딛치는 부분이 많아 꼴딱 하루가 걸렸다. 먼저 배운점은

• 익힌 내용

1. 함수형 컴포넌트의 사용과 응용법. 읽어본 도서들에서 말하는것처럼 hooks와 함께 사용했을떄의 함수형 컴포넌트는 클래스 컴포넌트보다 사용이 편하다.

2. 컴포넌트안에서 map과 filter의 사용법. 배열을 엘리먼트로 구현할때는 map을, 제거할때는 filter로 어떻게 사용해야하는지에 대해 특히 필터는 오늘 처음 써보았는데 상당히 합리적이었다.

• 어려움을 겪은 내용

1. 시계 카운터 만들기. 시계를 만들기 전에 setInerval로 1초마다 갱신되는 카운터를 만들었는데 콘솔상에서

다음과 같이 정신없이 콘솔이 찍히는 결과를 보았다. 이부분을 useEffect를 활용해서 작업했는데, 생명주기의 비동기적 처리에 대해서 이해->적용하는데 시간이 걸렸다.

2. 익힌 내용에서 서술한 filter의 사용법. Todo리스트를 제거하는 버튼을 어떻게 만들지 하는 고민에 한참을 보냈다. 함수형 컴포넌트로 만들었다가 다시 클래스형으로 변환했다가... 결국에는 다시 함수형으로 돌아와 filter로 구현했다.

생각보다 오래걸려 계획이 조금 꼬이긴 했지만, 안해봤으면 다른 공부를 진행할때 더 큰 어려움을 겪지 않았을까 한다. 리액트,재밌고 참 진이 빠진다아