React로 Twittler 구현해보기

 

최근 프리코스를 수료하고 어떤 것들을 더 공부해볼까 고민하다가, 가볍게 리액트를 맛보기로 했다.

사실 예전에 노마드코더의 리액트 무료강의를 들었던 적이 있었는데, node나 npm에 대해서 하나도 모르는 상태에서 따라치기만 급급해 제대로 이해를 하지 못하고 넘어갔던 기억이 있다.

이번에는 제로초님의 리액트 웹게임 강좌를 바탕으로 기초 내용부터 차근차근 이해하는 것이 목표!

 

6강까지의 초급 강의를 먼저 듣고, 배운 것들을 활용해보고 싶어서 프리코스 과제였던 twittler를 react로 구현해보기로 했다.

강의에서도 class와 hooks를 번갈아 가며 사용해서, 웬만하면 둘 다 구현해볼 생각이고, hooks에 조금 더 관심이 가서 hooks로 먼저 구현해보았다.

 

pre course에서 만들었던 twittler 실행 화면

 

먼저 화면을 구성할 컴포넌트로 나누고, 각 컴포넌트에 어떤 기능이 들어가야 할지부터 생각해보았다.

그 내용을 정리하면서 그림판에 대충 마우스로 끄적였던 게 있지만..

너무 지저분해서 그때 짰던 컴포넌트 구성만 다시 그려왔다.

 

 

처음에는 Form이 표시되는 부분과, 랜덤트윗 버튼 & 트윗들이 표시되는 부분을 따로 컴포넌트로 나누는 구조를 생각했었다.

대략 컴포넌트들에서 하는 역할을 정리해보자면:

 1. <FormArea />에서 UserName, Comment의 값들을 가져온다.

 2. <Twittler />의 DATA state에 가져온 UserName, Comment, 작성시각 데이터를 추가한다.

 3. <TweetArea />에서 props로 받은 DATA를 이용해 이벤트 처리를 해 준다.

     - check new tweet! 버튼을 눌렀을 경우 랜덤 트윗을 가져와 다시 DATA에 반영해준다.

     - 각 트윗의 유저이름을 클릭했을 때 필터링되는 이벤트 콜백함수를 만들어 <Tweet />으로 전달한다.

     - 버튼의 텍스트가 back으로 바뀌었을 경우 원상복구시킨다.

 4. DATA를 <Tweet />에 전달해 화면에 내용을 표시해준다.

 

하지만 이때는 useReducer와 dispatch와 같은 개념들이 잘 이해가 가지 않는 상태로 무작정 구현에 뛰어들어 state 관리에 어려움을 느꼈다.

가장 큰 문제점이라고 생각했던 부분은 <FormArea /> 컴포넌트에서 UserName과 Comment 정보를 가져온 뒤,

<Twittler /> 컴포넌트에서 <TweetArea /> 컴포넌트로 물려줄 DATA state에 반영하는 것이 어려웠다.

 

state들을 쉽게 물려주기 위해 구조를 위와 같이 변경했다.

덕분에 <FormArea />의 코드가 의도한 것과는 다르게 많이 지저분해졌지만, 우선은 구현하는 것을 목표로 삼았기 때문에 일단은 그냥 넘어가기로 했다.

그리고 바로 다음날 들은 웹게임 강좌 7강에서 contextAPI에 대해 다루는 바람에 하루만 더 늦게 할걸.. 하고 후회하기도 했다..

 

다음으로 가장 애먹었던 구간이 check new tweet! 버튼을 눌렀을 때 버튼의 텍스트 값에 따라서 다르게 조작되는 부분이었다.

이 부분은 조금 쉬다가 돌아와서 버튼의 변하는 텍스트값들을 state로 만들어 주었더니, 삽질한 시간에 비해서 쉽게 해결되었다.

 

 

제대로 작동은 하게끔 만들어졌지만, 이 뒤에 더 배운 개념들도 많고 고쳐보고 싶은 부분도 많은 것 같다.

처음으로 react를 이용해 연습을 해 보았는데, 내가 부족해서 많이 버벅거리고 삽질도 많이 했지만 재밌었다!

 

 

작성한 코드는 github에 올려 두었다.

https://github.com/lsy26499/react-basic/tree/master/twittler-react