[Final Project] 8/26 (목)

오늘 작업 내용

• 모바일 검색 컴포넌트 제작
• UI 디자인에 안맞춰진 css 수정
• wordcloud 에서 component 안의 component 재렌더링 안되게 하기

모바일 검색 컴포넌트

기본 검색 컴포넌트와 동일하나 localStorage 를 활용한 검색 기록 기능을 추가했다.

검색 기록을 삭제 혹은 전체삭제 할 수 있으며, 현재 검색이 이미 검색 기록에 존재할 경우 제일 최신 검색기록으로 오도록 만들었다

자식 컴포넌트 리렌더링 안되게 하기..?

워드 클라우드 상위 컴포넌트의 상태가 변하면 워드클라우드가 리렌더링되어 색깔이나 구조가 변했다. 그래서 최대한 부모에 있는 상태들을 자식 컴포넌트들로 옮겨서 워드클라우드가 최소한의 영향을 받게 했다. 그렇지만 완전히 원하는 데로 만들지는 못했다. class component 에서는 shouldComponentUpdate() 가 있고, functinal component 에서는 React.memo()가 있다. 하지만 내가 memo를 제대로 활용하지 못했는지 혹은 사용법을 모르는건지, memo를 통해 자식 컴포넌트의 렌더링을 막는것에 실패했다. stack overflow 에서 export default React.memo(Component) 이런식으로 감싸면 된다는 답변을 보았지만, 소득이 없었다.

그냥 functional component 에도 shouldComponentUpdate 라는 직관적인 함수가 있으면 좋았을 것 같다. class component 구조에서는 함수들이 나름 직관적이다. 마치 게임에서 매 프레임마다 실행되는 start(), update(), render() 같은 함수가 있는 것과 비슷한 느낌이다.