[TIL-009] 리덕스(Redux)의 이해 및 활용

Today목표 : 4/19일 리덕스(Redux)의 이해 및 활용, todo-list에 Redux 적용 시키기

---

알게된 점,

 

리덕스(Redux)의 이해 및 활용✅

다음 포스팅에 공부한 내용을 정리해 보았다.

리덕스(Redux)의 이해 및 활용해 보기

 

 

styled-component 사용해보기 ✅

styled-component를 사용해 보면서 느낀점

먼저 주의 : styled-component와 styled-component's'는 다르다... 설치하는데 적용이 안 돼서 조금 애먹었다.

일단 styled-component를 사용해 본 적이 처음이라 많이 낯설었다. style을 컴포넌트 자체로 생성하여 사용하는 방식이다. 

설치가 어렵다거나 사용 방법이 크게 어렵지는 않다. SCSS와는 다르게 보통 한 페이지에서 사용하거나, 코드가 길어지거나 난잡해질 경우 모듈화하여 styled로 사용하는 것 같기도 하다.

❗1. 일단 첫번째로 고민 되었던 것은 네이밍 규칙이었다. 아무래도 컴포넌트와 같이 대문자로 시작하는 경우가 많은 것 같아 처음에는 <InputCon> 이렇게 지정 하였는데, 내가 보기엔 컴포넌트와 구분되지 않아 가독성이 안 좋았다. 

따라서 두번째로 뒤에 Style을 붙여 CSS라는 것을 구분할 수 있게끔 네이밍 하였다. <InputStyle> 하지만 이역시도 컴포넌트들과 섞여있다 보면 시작 부분이 구분되지 않아 눈에 들어오지 않았다. 마지막으로 style의 약자로 ST를 앞부분에 붙여 <StInput> 이런 식으로 사용하기로 결정했다. <StyleInput>이런 방식도 괜찮은 것 같다.

❗2. 모든 태그들의 스타일을 전부 styled-component로 만들어야 하는가..?  

이런식으로 계속 컴포넌트로 만드려다 보니 아무래도 코드 작성이 너무 번거롭고 불필요한 컴포넌트 투성이인 코드는 더 난잡해지는 것 같았다. 이 때, 하나의 styled-component 안에서 자식 요소의 스타일을 조정할 수 있다는 것을 알았다.

내가 생각한 방식이긴 하지만, styled-component를 줄이기 위해, 특정 컴포넌트들을 감싸는 div 컨테이너 요소, 또는 특정 요소에만 style-component화 하고, 자식 요소들은 하위 태그 스타일로 작성하였다. 또 앞에는 ST, 뒤에는 Con을 붙여 style이 적용되는 Container라는 의미로 라고 네이밍하였다.훨씬 깔끔해진 것 같았다. 

- 개선된 코드

function Todo({ todo }) {
  return (
    <StTodoCon>
      <h4>{todo.title}</h4>
      <p>{todo.text}</p>
      <StButtonCon>
        <Button></Button>
        <Button></Button>
      </StButtonCon>
    </StTodoCon>
  );
}

const StTodoCon = styled.div`
  width: 20%;
  padding: 3%;
  margin: 2%;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
  border-radius: 10px;
  
  h4 {
    font-size: 24px;
  }
  p {
    margin: 10% 0;
  }
`;

const StButtonCon = styled.div`
  width: 100%;
  display: flex;
  justify-content: space-between;
`;

 => ❗분명 더 나은 방법이 많이 있을 것 같다. 여러 코드를 보면서 보편적으로 어떻게 많이 사용되는지 확인해 볼 필요가 있다. 또 아직 강의만 듣고 바로 적용해 봐서 공식문서와 여러가지 문법들을 다시 공부해 봐야 할 것 같다. CSS같은 경우 컨벤션 규칙이라던지 문법만 좀 숙지해 놓을 경우, 기본적으로 CSS틀에서 크게 벗어나진 않기 때문에(inline, js방식 등) 사용하는 것은 금방 배울 것 같다는 느낌이 들었다. 

 

 

todo-list에 Redux 적용 시키기 ✅

먼저 오늘은 Redux를 사용해서 todos를 전역상태로 관리하고,

todos state에 todo를 추가하는 기능부터 적용시켜 보았다.

export const ADD_TODO = "todos/ADD_TODO";

const initialTodos = [
  {
    id: Date.now(),
    title: "리액트 공부중",
    text: "재밌는 리액트 공부하기!",
    isDone: false,
  },
];

export const addTodo = (payload) => {
  return {
    type: ADD_TODO,
    payload,
  };
};


export const todos = (state = initialTodos, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state, action.payload];
    default:
      return initialTodos;
  }
};

만들면서 들었던 의문은, 리덕스를 이용해 todos state에 투두를 추가하는 기능을 구현하고자 했을때

❗1. payload에 대한 값을 todo만 넘겨줘야 하는가? 아니면 아예 사용부에서 가공된 새 todos를 생성하여 넘겨줘야 하는가? 였다. (useSelector로 todos를 가져와, todos에 todo를 추가한 새 todos를 넘겨주어 todos를 return하는 함수에서 바로 action.payload를 리턴할 수 있게) 

전자라면 todos를 return하는 switch문에서 state와 aciton.payload를 받아 추가하는(또는 filtering 등의) 하는 로직을 작성해야 할 것 같고,

후자라면 사용부에서 useSelector로 todos를 받아 새로 todos를 가공하여 todos의 payload로 보내줘야 할 것 같은데

전자라면 todos를 가공하기 위해 굳이 다시 todos를 가져와야 하고, 후자라면 switch문에서 데이터를 가공하느라 로직이 난잡해질 수도 있을 것 같은데.. 뭐가 더 맞는 방법인지 궁금하다.  addTodo는 state에 접근할 수 없어 보이는데 아직 잘 모르겠다. 이 부분은 질문해 봐야 할 것 같다.