[React] props 대신 redux 사용해보기_3

💡 실습 포인트!

• reducer 가 여러 개 필요한 경우 어떤 식으로 redux 를 활용해야하는지 알아보기 위해 장바구니 페이지에 알림창 UI 를 하나 만들어보았다.
• 하지만 이렇게 하나의 Component 에만 사용할 state 데이터라면 redux 에 굳이 저장할 필요가 없이 useState() 를 사용하는 것이 훨씬 쉽고 간단하다는 것도 알게 되었다.
• 이번에는 reducer 가 여러 개 필요한 경우 코드를 어떻게 작성하는지 배우기 위해 코드를 아래와 같이 작성하긴했지만, 복습하면서 useState() 를 사용한 방식으로 바꿀 예정이다.

---

💜 장바구니 페이지에 알림창 만들기

• 신규가입하면 최대 20% 할인 쿠폰을 제공한다는 알림창을 장바구니 페이지 하단에 띄우고 닫기 기능을 추가해보았다.

🤍 알림창 UI 만들기

let Alert = styled.div`
    background: #eee;
    max-width: none;
    font-weight: bold;
    color: red;
    font-size : 20px;
    padding: 15px 20px;
`

• 우선 styled-components 라이브러리를 활용하여 Alert Component 를 만들어주었다.

<Alert>
    <span className='me-3'>신규가입시 최대 20% 할인 쿠폰 제공!</span>
    <button className='btn btn-outline-danger'>닫기</button>
</Alert>

• 신규가입하는 경우 최대 20% 할인 쿠폰을 제공한다는 내용을 작성한 후 Bootstrap 을 활용하여 간단한 레이아웃을 잡아주고 <Alert></Alert> 로 감싸주었다.

---

🤍 reducer 하나 더 만들기

• useState() 를 사용해도 되지만 reducer 가 여러 개 필요한 상황을 연출하기 위해 redux 에 state 를 만들어서 사용해보았다.
• 알림창은 보이도록 혹은 안 보이도록 설정해줄 것이기 때문에 true / false 를 state 에 저장하면 된다.
• 그럼 어디에 저장하느냐가 문제가 되는데 일반적인 Component 에서 state 가 추가적으로 필요하면 useState() 를 하나 더 만들어서 사용하듯, redux 에서도 reducer 를 하나 더 만들어서 사용하면 된다.

let defaultAlert = true;

function reducer2(state = defaultAlert, action) {
  if (action.type === 'close') {
    state = false;
    return state;
  } else {
    return state;
  }
}

• reducer 를 하나 더 만들 때에는 state 초기값과 reducer, 이렇게 한 쌍을 만들어주면 된다.
  (그래서 나는 defaultAlert 라는 state 초기값과, reducer2 라는 reducer 를 만들어주었다.)
• 코드를 잠깐 해석하자면 먼저 알림창이 보이는 것을 true, 안 보이는 것을 false 로 정한 후에 장바구니 페이지에 접속했을 때는 알림창이 보여야 하므로 초기값을 true 라고 설정해주었다.
• 닫기 버튼을 클릭했을 때(action.type 이 'close'), state 에는 false 가 저장된 후에 return 되고 그 외의 경우에는 기본 상태로 return 하게 해주었다.

 

let store = createStore(combineReducers({ reducer, reducer2 }));

• 그리고 마지막으로 이전에 만들어두었던 store 에 reducer2 를 추가로 등록해주면 된다.
• 먼저, combineReducers() 라는 함수를 redux 로부터 import 해준다.
• 그 다음에 createStore() 안에 combineReducers() 를 사용하여, 이전에 만들고 사용한 reducer 와 이번에 만들어준 reducer2 를 object 형식으로 담아주면 된다.

---

🤍 reducer 사용하기

// reducer 가 하나였을 때

function Store(state) {

    return {
        state : state;
    }

}


// reducer 가 두 개일 때

function Store(state) {

    return {
        data : state.reducer,
        alert : state.reducer2
    }

}

• reducer 가 하나일 때와 달리 2개 이상일 때에는 state 안에 { reducer : [ ], reducer2 : [ ] ... } 와 같이 데이터가 담겨있는 것을 확인할 수 있다.
• 따라서, state 를 props 로 저장할 때 state.reducer 는 data 로, state.reducer2 는 alert 로 저장해주었다.

---

🤍 알림창 닫기 버튼 기능 만들기

{
    props.alert === true ? (
        <Alert>
            <span className='me-3'>신규가입시 최대 20% 할인 쿠폰 제공!</span>
            <button className='btn btn-outline-danger' onClick={ ()=>{ props.dispatch({ type : 'close' }) } }>닫기</button>
        </Alert>
    ) : null
}

• 삼항 연산자를 활용하여 전송받아온 props.alert 가 true 라면 알림창을 보여주고, false 라면 알림창이 안보이도록 코드를 작성했다.
• 그리고 닫기 버튼에 onClick 속성을 넣어, 닫기 버튼 클릭 시 action.type 이 'close' 가 되어(이 과정에서 state 가 false 로 바뀐다.) 알림창이 안 보이도록 해주었다.