[2019.02.22] React로 Twittler 작업 완성..(하루만에..대박!)

대박...오늘 아침까지 리액트 첫번째 프로젝트 작업한거 개념 정리하고, preCoure 과제로 진행했던 트위틀러를 똑같이 리액트 방식으로 구현해 보았다.

솔직히 내일까지는 걸릴 줄 알았는데, 오늘 점심부터 작업해서 방금 구현을 다 끝냈다!

# 기존의 과제 때 구현했던 페이스북 형식의 twittler를 React 방식으로 구현한 모습

외관 상으로는 변경된 점이 당연히 없다. 정말 많이 변한 부분은 안의 소스코드 내용이다.

# 리액트로 작성한 소스코드

기존의 html, css, javascript로만 작성했던 것을 거의 뒤집어 엎었다. 리액트 방식으로 작업을 하니 코드 구조가 전체 다 바뀌고, 데이터를 주고받는 형식, 렌더링 방식 등이 전부 달라서...작업 중에 정말 많이 헷갈렸다. 

그래도 첫번째 작업한 전화번호부에 이어서 트위틀러도 리액트로 작성을 해보니까, 이제야 어느정도 리액트 코딩을 하는 느낌을 좀 알 것 같다.

이름과 내용을 추가할 때 맨 위쪽부터 추가되는 기능도 잘 되고, 랜덤으로 tweet을 가져와서 위에 추가시키는 기능도 잘 된다. 더불어 필터링과, 다시 기존 리스트로 되돌아가는 기능도 전부 이상없이 잘 된다.

그러나 한 가지 문제가 있다면, 새로운 content를 리스트에 새롭게 추가할 때마다, 리스트에 있는 모든 컴포넌트들이 전부 새롭게 렌더링이 된다. 변하지 않은 컴포넌트는 리렌더링이 되면 안되는데, 상위 컴포넌트가 리렌더링을 하니까 변함없는 컴포넌트들도 모두 포함하여 전부 리렌더링의 되서 자원낭비가 되는 문제가 초래한다.

# 컴포넌트를 리렌더링 할지 여부를 정하는 메소드

shouldComponentUpdate(nextProps, nextState){
   return nextProps.name !== this.props.name; //<- 왜 안먹히는거지...?
 }

그래서 위 코드와 같이 상위 컴포넌트에서 리렌더링하면서 새롭게 들어온 props와 현재 컴포넌트가 가지고 있는 props를 비교해서 같으면 false를 반환해 업데이트를 막고, 다르면 true를 반환해 리렌더링을 시키면 된다.

개념을 알고 있어서 적용을 해 보았다. 둘다 콘솔로그로 데이터 확인도 해서 같은지 다른지 확인도 했다...

근데 왜 false여도 리렌더링 되는거지...?! ㅜㅜㅜㅜㅜㅜㅜ

지금은 원인을 도저히 찾을 수 없으니, 향후에 다시한번 봐보고 고쳐봐야겠다...ㅎㅎ;