👾 Redux를 이용한 간단한 게시물 추가 및 삭제

📢 여는 말

이전에 바닐라 자바스크립트로 ToDo-List를 간단하게 구현한 적이 있었다. 그때도 메모장을 추가하고, 삭제할 수 있는 기능까지만 구현을 했었는데, 리덕스로 만들어볼까? 하는 생각이 들었다. 결론은 ... 정말 간단하게 구현할 수 있을 줄 알았지만 생각보다 더 복잡했다는 것. 그래서 헷갈리고 어려웠던 부분 위주로 글을 작성해보려고 한다.

---

01. 기본적인 틀

    <div id="subject"></div>
    <div id="toc"></div>
    <div id="control"></div>
    <div id="content"></div>

이렇게 id 값을 주고 이들을 함수 안에 document.querySelector을 통해 넣어줄 것이다.

---

02. 코드 리뷰

1. reducer 함수

📝reducer은 store을 생성하기 위해 만든 함수이다.

function reducer(state,action){
    if(state===undefined){
        // 1.HTML, 2.CSS 글목록을 넣어줄 것.
        return{
            max_id:2 ,
          	selcted_id:2,
            mode:'welcome',
            contents:[
                {id:1, title:"HTML", desc:"HTML is ..."},
                {id:2, title:"CSS", desc:"CSS is ..."}
            ]
        }
    }

• 화면에 있는 HTML과 CSS의 id , title, desc을 content라는 배열에 담아주었고 mode : 'welcome'으로 지정하여 이를 초기값으로 설정했다.

---

2. TOC 함수

📝TOC 함수 부분은 글 목록이 나타나는 부분이다.

let state= store.getState();
    let i= 0;
    let liTags='';
    while(i<state.contents.length){
        liTags= liTags+ `
            <li>
                <a onclick='
                    event.preventDefault();
                    let action = {type:'SELECT', id:${state.contents[i].id}}
                    store.dispatch(action);
                ' href="${state.contents[i].id}">${state.contents[i].title}</a>
            </li>
                `;
        i+=1;
    }
    document.querySelector('#toc').innerHTML=
    `
        <nav>
            <ol>${liTags}</ol>
        </nav>
    `;
}

• liTags는 빈 문자열로 선언한 뒤, 반복문을 통해 반복하면서 1.HTML , 2.CSS 처럼 글 목록이 나타날 수 있도록 해주었다.

• 글 목록은 각각 링크로 연결되어 있어서 링크를 클릭하면 404가 뜬다. 이를 방지해주기 위하여 onClick 이벤트에 event.preventDefault( )값을 주었다.

• 글 목록을 누르면 title이 다르게 나타나야 한다. 그래서 action에 type: 'SELECT', id:id:${state.contents[i].id} 를 설정했다. 📌 id가 글의 번호이다.

• action 값은 store.dispatch(action);로 전달되어 reducer에게 가야해서 이 구문을 작성했다.

---

3. control 함수

📝 control은 글을 작성, 삭제할 수 있는 기능을 담은 부분이다.

function control(){
    document.querySelector('#control').innerHTML = `
    <ul>
        <li><a href="/create">create</a></li>

        <li><input type="button" value="delete"></li>
    </ul>
    `;
}

• create와 delete는 따로 action을 변수로 선언하여 담지 않고, 바로 dispatch에게 전달해주는 방식으로 했다.

🤔 왜 create는 a 태그를 사용하고, delete는 button으로 했을까?

🔎 delete는 a href 를 사용하면, 자동화된 프로그램에 의해 삭제 기능을 실행할 수 있기 때문에 button으로 구현했다.

---

4. article 함수

📝 create, read, welcome 모드를 담은 함수이다.

• create 모드는 control 함수에서 create를 눌렀을 때 글을 작성할 수 있는 부분이 나타난다.
• read 모드는 TOC 함수에서 글 목록을 클릭 했을 때 아래 사진과 같이 하단에서 문구를 보여준다.

• welcome 모드는 delete action이 실행될 때 아래 사진과 같이 하단에서 문구를 보여준다.
  

---

function article(){
    let state = store.getState();
    if(state.mode === 'create'){
        document.querySelector('#content').innerHTML = `
        <article>
            <form>
                <p>
                    <input type="text" name="title" placeholder="title">
                </p>
                <p>
                    <textarea name="desc" placeholder="description"></textarea>
                </p>
                <p>
                    <input type="submit">
                </p>
            </form>
        </article>
        `
    } else if(state.mode === 'read'){
        let i = 0;
        let aTitle, aDesc;
        while(i < state.contents.length){
            if(state.contents[i].id === state.selcted_id) {
                aTitle = state.contents[i].title;
                aDesc = state.contents[i].desc;
                break;
            }
            i = i + 1;
        }
        document.querySelector('#content').innerHTML = `
        <article>
            <h2>${aTitle}</h2>
            ${aDesc}
        </article>
        `
    } else if(state.mode === 'welcome'){
        document.querySelector('#content').innerHTML = `
        <article>
            <h2>Welcome</h2>
            Hello, Redux!!!
        </article>
        `
    }
}

• read모드에서 if(state.contents[i].id === state.selcted_id) 부분은 내가 고른 글 목록의 번호(state.selcted_id)이 state.contents에 있는 id의 값과 동일한지 확인한다는 의미이다.

---

5. reducer 함수 내에 복제한 state

📝 기존의 state를 변경시켜 return 하는 것이 아닌 state 값을 복제하여 값을 변경시킨 것을 return 하는 것이다.

   let newState;
   // SELECT는 1.HTML처럼 글 목록 부분
   if(action.type === 'SELECT'){
       newState = Object.assign({}, state, 
           {selcted_id:action.id, mode:'read'});
   } 
	else if(action.type === 'CREATE'){
       let newMaxId = state.max_id + 1;
       let newContents = state.contents.concat();
       newContents.push({id:newMaxId, title:action.title, desc:action.desc});
       newState = Object.assign({}, state, {
           max_id:newMaxId,
           contents:newContents,
           mode:'read'
       })
   } 
	else if(action.type === 'DELETE'){
       let newContents = [];
       let i = 0;
       while(i < state.contents.length){
           if(state.selcted_id !== state.contents[i].id){
               newContents.push(
                   state.contents[i]
               );
           }
           i = i + 1;
       }
       newState = Object.assign({},state, {
           contents:newContents,
           mode:'welcome'
       })
   } else if(action.type === 'CHANGE_MODE'){
       newState = Object.assign({}, state, {
           mode:action.mode
       });
   }
   console.log(action, state, newState);
   return newState;

• action.type이 CHANGE_MODE(create 링크)일 때 mode:action.mode은 CHANGE_MODE일 때 mode가 create이므로 article의 create 부분을 가르킨다.