recoil을 도입하여 컴포넌트 개선하기

출퇴근 할때 빠르고 쉽게 일기를 쓰기위해 speedJournal 이라는 프로젝트를 만들었다.

 

오늘의 아침 기분은 ---- 했다.

오늘의 점심 기분은 ---- 했다.

오늘의 저녁 기분은 ---- 했다.

 

라는 문장을 빠르게 완성하기 위한 컴포넌트가 필요했다.



각 감정(emotion)을 클릭하면 문장이 채워질 것이다.

단, 감정의 종류는 다양하기 때문에 아래와 같이 각 핵심 감정(category)을 클릭하면 선택할 수 있는 하위레벨의 감정이 표시된다.

 

 

 

이러한 감정들을 json으로 가져온다(추후 mongodb와 연동할 것임)

 

 

 

컴포넌트의 구조는 아래와 같다.

저널 : 몇번의 터치로 완성될 문장들의 집합(일기)
카테고리 그리드 : 각 카테고리를 목록으로 가진 컴포넌트
    카테고리 아이템 : 각각의 카테고리

 

 

 

이때 카테고리 아이템은 emotion의 갯수만큼 순회한다.

 

 

emotion 데이터에서 가져온 아래와 같은 데이터를 card 컴포넌트의 prop으로 가져와 필요한 부분에 셋팅한다.

대충 컴포넌트는 여기서 마무리.

 

 

 

 

 

 

이제 state를 작성해줘야하는데 recoil의 state는 아래와 같이 하나의 파일에서 관리할 수 있다.

 

각 state는 key, default로 구성할 수 있는데,

이름 그대로의 의미다.

key는 컴포넌트에서 불러올때, default는 초기값

 

selector는 파생된 상태를 말한다.

예를들어 다른 상태를 가져와 가공하여 get으로 다시 리턴할 수 있고, 

마찬가지로 set으로 변경할 수 있다.

 

filterCategoryListState는 

CategoryList를 filterState의 값에 따라 필터링하여 리턴해준다.

 

예를들어 내가 'sad' 카테고리를 클릭하면 sad에 해당하는 모든 감정을 비활성화하도록 상태가 수정된다.

 

 

 

react는 기본적으로 부모 -> 자식으로만 상태가 변경되기 때문에 클릭 이벤트 등으로 자식-> 부모로 데이터를 전달하려고 할때 코드가 굉장히 지저분해지는데, recoil을 사용하면 하나의 공용 store에서 state를 관리하기때문에 코드가 간결해진다.

 

이전에 작업한 기존 컴포넌트는 상태를 컴포넌트마다 관리하여 코드가 지저분하고 각 카드별 상태를 수정하는게 어려웠는데,
recoil을 도입하여 하나의 파일에서 emotion list를 관리하고, 각 컴포넌트에서 상태변화에 따른 랜더링만 집중할 수 있었다.