[Redux] redux 중급 - 문자열 입력/삭제 및 화면에 구현하기

31226 단어 reduxredux

1. Redux를 활용한 문자열 입력/삭제 및 화면 구현

문자열을 입력받아 화면에 나타나도록 하는 logic을 구현해본다.

2. 기본 구조 구성하기

기본적인 store, reducer 등 redux 구조 및 HTML을 구성한다.

2-1. HTML template 구성

화면을 먼저 구성하고, 각 tag 속성을 정의하여 준다.

<body>
    <h1>To Do LIST</h1>
    <form>
      <input type="text" placeholder="Write to do" />
      <button>Add</button>
    </form>
    <ul></ul>
  </body>
  • form tag 안에 input / button을 넣는다.
  • input tag를 통해 문자열을 입력받고, button을 통해 이벤트를 발생시킨다.
    ※ form tag 전부를 addEventListener(submit) 발생시키도록 구성하여, 문자열입력과 버튼클릭 모두 이벤트 발생 및 서로 연결할 수 있도록 구성한다.

2-2. Redux 기본 구조 설정

import {createStore} from 'redux'

const form = document.querySelector("form")
const input = document.querySelector("input")
const ul = document.querySelector("ul")

const ADD_TODO = "ADD_TODO"
const DELETE_TODO = "DELETE_TODO"

const reducer = (state = [], action) => {
  switch(action.type){
    case ADD_TODO : return []
    case DELETE_TODO : return []
    default : return state
  }
}

const store = createStore(reducer)

위 코드와 같이 form , input, ul tag를 document.querySelector를 통해 연결해준다.

이후 store를 생성하고, 기본적인 reducer 구조를 만들어준다.

action에 대한 분기처리는 switch로 구성하여 준다.

2-3. addEventListener (Event 설정 및 logic 연결)

Event를 연결해주고, action과 입력받은 문자열(text)를 모두 dispatch를 통해 전달하기

const onSubmit = e => {
  e.preventDefault()

  const toDO = input.value
  input.value = ""

  store.dispatch({type : "ADD_ToDo", text : toDO})
}

form.addEventListener("submit", onSubmit)

form 내부에서 일어나는 모든 이벤트(여기서는 ADD버튼을 클릭하였을 때의 submit 이벤트)에 대해 이벤트 설정을 해주고, onSubmit 함수를 호출하여 해당 logic을 작동한다.

onSubmit를 통해 action을 disptach한다.

  • ADD_ToDO type을 전달하여 ADD_TODO 분기처리를 해준다(입력받은 문자열 추가).
  • 이때 입력받은 문자열은 dispatch와 함께 전달되며, input.value를 통해 전달 및 toDO 변수에 최종 저장된다.
  • onSubmit은 기본적으로 하위 tag들의 이벤트들(특히 onClick)을 감지하고, 이에 따른 하위 tag들의 value 값들을 확보할 수 있는 hooks의 일종이다.

※ prventDefault는 브라우저에서 이벤트 실행 시 자체적으로 동작하는 이벤트들을 강제적으로 막아주는 기능이다.

※ dispatch를 통해 action 뿐만 아니라 다른 여러 객체나 변수들도 전달할 수 있음을 기억한다.

2-4. action을 log 출력하여 출력 확인해보기

console.log(action)

전달받은 action을 log 출력해서 어떤 인자들이 출력되는지 확인해본다.

dispatch 받은 action 인자는 type과 text 모두 전달받았다.
특히 text는 input.value, 즉 입력받은 문자열이 그대로 전달받았음을 알 수 있다.

이를 활용하여 문자열을 화면에 구현하거나 삭제하는 기능을 추가 구현해본다.

3. state 변화를 반영하고 이를 subscribe 및 화면구현

변화한 state를 subscribe를 통해 화면에 구현한다(log 출력).

3-1. subscribe

dispatch를 통해 text 객체(변화 state) 전달하고, 이를 subscribe를 통해 연결한다.

const reducer = (state = [], action) => {
  console.log(action)
  switch(action.type){
    case ADD_TODO : return [...state, { text : action.text } ]
    case DELETE_TODO : return []
    default : return state
  }
}

새로운 객체를 반환할때 기존 state(...state)와 새로운 state 객체(text : action.text)를 반영하여 return 해준다.

3-2. log 확인

store.subscribe(() => console.log(store.getState()))

위 reducer logic을 통해 변화한 state를 받아오면, 이를 subscribe해서 logic을 출력해본다.

기존 state인 공배열 상태에서 변화한 객체들이 배열(state)에 누적되는 것을 살펴볼 수 있다.

  • state 배열에 추가한 객체들이 누적된다.
  • 누적된 객체들은 배열의 한 인덱스 공간을 차지(=인덱싱)하면서 저장된다.
  • state의 getState, 즉 현재 state는 누적되어있는 객체들이 저장된 배열 상태이다.

3-3. state 상태반영을 통해 화면에 나타내기

전달받은 text를 새로운 tag를 생성하면서 해당 innerText에 생성하고,
새 tag의 id(unique 인자)에 할당할 id값을 dispatch 항목에 추가해준다.

const reducer = (state = [], action) => {
  console.log(action)
  switch(action.type){
    case ADD_TODO : return [...state, { text : action.text, id : action.id } ]
    case DELETE_TODO : return []
    default : return state
  }
}

const onSubmit = e => {
  e.preventDefault()

  const toDO = input.value
  input.value = ""

  store.dispatch({type : "ADD_TODO", text : toDO, id: Date.now()})
}

action 인자를 전달할 때, dispatch를 통해 text와 id 값을 전달한다.
※ 이때 id값은 Date.now를 통해 생성해주었다.

const paintTextToView = () => {
  const lists = store.getState()
  ul.innerHTML = ""

  lists.forEach(listItem => {
    const li = document.createElement("li")
    li.id = listItem.id
    li.innerText = listItem.text
    ul.appendChild(li)
  })
}

store.subscribe(paintTextToView)

전달받은 객체(text, id 값)을 그대로 활용하여, li tag를 생성하면서(document.createElement("li") 화면에 입력받은 text가 나타나도록 구성한다.

위 logic의 흐름은 아래와 같이 작동한다.

  • add버튼을 누르면 submit 이벤트가 작동하면서 subscribe를 통해 paintTexttoView 함수가 실행된다.
  • getState를 통해 변화한 상태값을 받아온다(action.text가 누적된 state 배열).
  • 해당 상태값의 요소들을 loop하면서 li tag를 생성하고 화면에 구현한다(innerText).
  • 이 생성한 li 속성들을 ul tag 하위에 종속시켜준다(appendChild).

※ 받은 객체를 그대로 loop(forEach)할 경우 누적된 배열상태를 그대로 복사하므로, 최근에 반영한 요소 값만 온전히 생성하도록 기존의 innerHTML 속성들을 공배열화.

3-4. 구현된 화면 확인

logic이 정상적으로 작동하는지 확인해본다.

3-5. (참조) reducer return 순서에 따른 구현 화면

return 하는 객체의 순서를 바꾸면 화면에 구현되는 모습도 바꿀 수 있다.

case ADD_TODO : return [{ text : action.text, id : action.id }, ...state,  ]

위 코드처럼 return 하는 배열의 모습을 새로 생성된 객체 - 기존의 state 배열 순으로 하면, 최종적으로 getState를 통해 전달받는 구조도 새로운 객체 - 기존 stae({...state}) 순이므로 해당 순서 그대로 화면에 구현한다.

return할 때는 모든 배열요소를 전달해주므로, 순서와 함께 ul.innerHTML= ""을 선행해야 변화 요소만 화면에 구현해줄 수 있다는 것을 기억하자.

4. 화면에 구현된 문자열 삭제하기

화면에 문자열이 생성될 때 마다 DELETE 버튼을 생성하고,
해당 버튼을 누르면 삭제하는 logic을 구성한다.

4-1. 문자열 생성하면서 button 생성

createElement button도 같이 생성해준다.

lists.forEach(listItem => {
    const li = document.createElement("li")
    const btn = document.createElement("button")

    li.id = listItem.id
    li.innerText = listItem.text
    ul.appendChild(li)
    
    btn.innerText = "DELETE the list"
    li.appendChild(btn)
  })

subscribe 하면서 문자열 생성과 동시에, button tag도 같이 생성해준다.
이 버튼 tag는 문자열과 마찬가지로 상위 tag를 li로 하도록 구성해준다.

4-2. Delete button과 삭제 항목의 id 연결

Delete button과, Delete button이 생성된 상위 tag인 li의 id 값을 연결한다.

btn.innerText = "DELETE the list"
    btn.addEventListener("click", (e) => {console.log(e.target.parentNode.id)})
    li.appendChild(btn)

click 이벤트 실행 시

  • e.target을 통해 event가 실행되는 tag 속성을 받아올 수 있다.
  • e.target.parentNode.id를 통해 해당 tag가 종속된 부모 tag인 li tag id 값을 확보할 수 있다.
  • 확보한 id 값을 이후 삭제하는 logic을 구성하도록 설정한다.

4-3. 삭제하는 action을 dispatch 및 reducer 내부 logic 구성

이벤트 발생 시 action을 dispatch 해주며 이때 action을 통해 id값을 전달한다.
실질적으로 해당 id 값을 삭제하는 logic은 reducer 내부에서 구성해준다.

btn.innerText = "DELETE the list"
    btn.addEventListener("click", (e) => {
      const id = e.target.parentNode.id
      store.dispatch({ type : "DELETE_TODO", id })
    })
    li.appendChild(btn)

DELETE 버튼을 누르면 click 이벤트가 발생하며, 삭제할 요소의 id 값을 action dispatch를 통해 전달하는 구조를 구성해준다.

또한 DELETER 버튼을 눌렀을 때, reducer 내부에서 해당하는 logic을 동작할 수 있도록 reducer 에서 정의해준 삭제 type을 그대로 객체화하여( {type : "DELETE_TODO"} ) 전달해준다.

const reducer = (state = [], action) => {
  console.log(action)
  switch(action.type){
    case ADD_TODO : return [{ text : action.text, id : action.id }, ...state,  ]
    case DELETE_TODO : return state.filter
    default : return state
  }
}

reducer 내부는 해당 action을 dispatch 받고, 전달받은 type과 id를 통해 어떤 삭제 logic을 구현해야 하는지 생각해본다.

4-4. array.filter를 통한 새로운 객체 반환 구조(삭제 logic) 구성

삭제 logic을 구성하는 핵심 요소는 아래 두가지 요소이다.

  • dispatch를 통해 전달받은 action의 type
  • dispatch를 통해 전달받은 action의 id

이 요소를 활용하여 state를 직접 mutation하지 않고(push, attend 등),
새로운 객체 값(배열)을 반환해주는 filter 함수를 이용한다.

const reducer = (state = [], action) => {
  console.log(action)
  switch(action.type){
    case ADD_TODO : return [{ text : action.text, id : action.id }, ...state]
    case DELETE_TODO : return state.filter(deletedList => deletedList.id !== Number(action.id))
    default : return state
  }
}

위 코드처럼 삭제 type이 전달되어, 삭제 logic을 구현하게 되며

  • state.filter를 통해 현재 나타난 배열 상태에서 조건을 만족하는 배열만 return하고 이를 화면에 구현하게 된다.

  • forEach는 배열의 요소를 모두 loop하고, 우리가 활용할 조건은 id값이므로 이를 염두하면서 조건을 처리한다.
  • 조건을 만족하는 요소만 return하여 화면에 구현하면 되는데, id값이 다른 요소들만 state에 반영한다면 id값을 제외한 나머지 요소들이 state에 나타날 것이다.
  • 이 state는 id값을 제외하므로, 삭제된 효과를 가진다.

4-5. 삭제 logic 확인

logic이 정상적으로 작동하는지 확인한다.
(※ 화면 상에서는 second 항목이 삭제된 모습)

5. 참조링크

array 관련 javascript method 공식문서(filter 참조)
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/splice

event.preventDefault
https://pa-pico.tistory.com/20

[Leetcode] 416. Partition Equal Subset Sum (C++)
Spring MVC (4) 웹 페이지 작성 실습 2

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage