[Day 51] 2022-0901 : 리액트 상태관리, Redux

🐈오늘 공부한 것

✔️리액트의 상태관리

어제의 props drilling 체험(?) 과제에 이어, 그 과제를 Redux 를 사용해 리팩토링하는 과제를 진행했다. 먼저 상태 관리란, 컴포넌트와 상태를 분리하여 관리하는 개념이다. 상태를 임의의 두 가지 기준으로 나눈다면 로컬 상태(컴포넌트 안에 존재하는 상태) 와 글로벌 상태(전역으로 관리되는 상태) 가 있을 수 있다. 기존의 방식에서는 로컬에서 useState로 상태를 생성하여 컴포넌트에 props로 내려주는 방식으로 상태가 관리되었다면, 리덕스나 리액트 context 같은 상태관리 도구에서는 전역으로 상태를 관리할 수 있는 저장소를 제공하여 필요한 컴포넌트에 바로바로 전달해 줄 수 있다. 전자와 같은 방식의 경우 하위로 상태를 내려주기 위해서, 그 상태가 필요하지 않은 컴포넌트에도 상태를 내려주어야 하기 때문에 금방 코드가 복잡해지고 상태의 흐름을 추적하기가 쉽지 않다. 그렇기 때문에 상태관리 도구를 사용해 상태를 전역 저장소에서 관리해주는 것이다!

✔️Redux 간단 정리

오늘은 간단하게 정리하고 내일 조금 더 자세하기 블로깅을 할 예정이다.리덕스는 리액트에서 사용할 수 있는 대표적인 상태관리 라이브러리 중 하나인데, 리액트의 하위 라이브러리는 아니고 독립적으로 사용할 수 있는 라이브러리이다. (바닐라 자바스크립트에서도 사용할 수 있다.)

 

리덕스는 FLUX 라는 디자인 패턴을 기반으로 동작하는데, 이들의 구성 요소는 다음과 같다.Action -> Dispatch -> Model(Store)-> View  이런 흐름을 가지고 있고, view 에서 새로운 Action이 만들어지면 다시 Dispatch 로 돌아가 Store -> View 를 거치게된다. 대규모 애플리케이션에서 기존의 MVC 패턴(Controller -> Model -> View) 의 문제점을 해소하고자 페이스북이 만든 디자인 패턴이라고 한다. MVC 디자인 패턴이 무엇이고 그 문제점이 무엇인지 잘 모르기 때문에 일단 패스.

 

리덕스에서는 위 4가지 주요 개념이 맞물리면서 단방향 데이터 흐름을 만드는데, 대략적인 동작 방식은 아래와 같다.

1. UI 에서 상태 변경 이벤트가 발생하면, 그 상태에 대한 정보가 담긴 'Action 객체' 가 생성된다.
2. 이 Action 객체를 가지고 Dispatcher 함수가 Reducer 함수를 실행시키는데, Reducer 함수에는 Action 객체에 담긴 Type 에 따라 분기시켜 상태를 다르게 업데이트할 수 있는 로직을 가지고 있다. 
3. Reducer 가 type 을 확인해 로직에 맞게 처리하면, reducer가 리턴한 값이 새로운 상태로 업데이트가 되고, 상태가 업데이트 되었기 때문에 리액트는 리렌더링을 실시한다. 

 

리액트에서 리덕스를 쉽게 사용하기 위해서 'react-redux'라는 라이브러리를 추가로 설치해주는데, 여기서 store를 손쉽게 사용할 수 있도록 도와주는 Provider 컴포넌트와, dispatch 함수를 사용하기 위한 useDispatch 그리고 store에 저장된 상태를 꺼내쓰기 위한 useSelector 같은 hooks를 제공해준다. 

 

redux 실습을 하면서 '그럼 그 상태는 도대체 어디서 선언을 해주는건데!?' 라는 의문점이 생겼는데, 과제를 하면서 해소할 수 있었다. 상태는 reducer 함수의 첫번째 인자에서 셋팅을 해줄 수 있다. reducer 함수가 첫 번째 인자로 state를 받는데 그 기본값을 상태로 만들 특정 데이터로 할당해주면 된다. 또 여러개의 reducer 가 있을 수 있는데 이 때는 redux 에서 제공하는 combineReducers 함수를 이용하여 하나의 변수에 담아줄 수 있다. 

✔️TodoList : 삭제기능 , react-icons 사용

그동안 삭제 기능을 만들지 않아서 테스트 할 때마다 로컬스토리지 전체 삭제를 해주었어야 했는데... 오늘 만들었다 ㅋㅋ

구현하고 싶었던 기능은 할일 목록 아이템에 마우스를 올렸을 때 hover 효과가 일어나고, 그 때 우측에 쓰레기통 아이콘이 나오도록 하는 것이었다. 일단 아이콘은 react-icons 라는 라이브러리를 활용했다.

 

잘 되지 않았던 점이, itemContainer 가 hover 될 때 이 아이콘이 등장하도록 설정하는 법이었는데, 처음에는 이것도 상태를 만들어서 props로 전달을 해주어야하나? 했지만 왠만하면 상태 남발을 지양하고 css 로 해결해보고자 하였다... input label 과 마찬가지로 + 선택자를 쓰면 되지 않을까.. 했는데 잘 되지 않았고 ㅋㅋ 벨로퍼트님의 투두리스트 레퍼런스 코드가 있어서 보면서 참고했다.

// react-icons 에서 필요한 icon을 import 했다. 
import {FaTrash, FaTrashRestore} from 'react-icons/fa';

// FaTrash 아이콘을 Remove div 에 담아주었다.
// 아래 &:hover 시에 컬러를 변경해주려고 했는데 잘 되지 않는다 ㅜㅜ
const Remove = styled.div`
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  display: none;
  padding-right: 10px;
  &:hover {
    color: #ff6b6b;
  }
`;

// 할 일 하나를 담고있는 itemContainer
// hover 했을 때 ${Remove} 이런 방식으로 div 를 조작할 수 있다.
const TodoItemContainer = styled.div`
  padding: 20px 0px 20px 10px;
  display: flex;
  border-radius: 10px;

  &:hover {
    background-color: var(--hover-color);
    transition: all 0.2s ease-in-out;
    cursor: pointer;
    ${Remove} {
      display: initial;
    }
  }
  `;
  
// 생략...
// icon 컴포넌트 색상 변경이 안되어서 일단 inline으로 변경했는데 좋은 방법 없을까??
<Remove onClick={deleteTodoHandler}>
	<FaTrash style={{fill: '#ff6b6b'}} />
</Remove>

삭제 기능이 추가되어 개발하기 편리해진(?) 투두리스트 ㅋㅋ

아침 모각코 시간에 한 시간 정도 수정했고, 아이콘 색 변경이 안되어서 해결하느라 시간을 좀 많이 쓴 것 같다.

아주 느리지만 조금씩 발전중인... 앞으로 추가하고 싶은 기능은 일단 할일 목록 영역이 이상하게 좁아져서 추가 수정을 해야할 것 같고, 드래그 앤 드롭기능을 만들어서 할일 목록의 순서를 변경하고 싶다. 그리고 여러개의 투두 컨테이너를 추가하도록... 

🐈더 공부할 것

1. 리덕스, FLUX 패턴 블로깅

2. TodoList :  inline edit 로 변경, 드래그 앤 드롭, gh-pages 배포

3. 알고리즘

🐈오늘의 느낀 점

1. 요즘 알고리즘 공부에 소홀해진 기분이 든다. 하루에 리액트도 하고 과제 리뷰도 하고 개념 블로깅도 하고 알고리즘도 공부하고 이 모든 것을 다 할 수는 없을 것 같아 날짜를 정해서 하려고 한다. 보통 알고리즘 스터디가 토요일이기 때문에 그 전날인 금요일에 주로 공부를 했는데, 해야할 일만 하고 끝내지 말고 다른 개념과 문제도 더 풀어야겠음. 1일 1알고리즘은 도대체 어떻게 하는거지 ㅜ ㅋㅋ