[React] react-redux part2 (todos추가)

여기까지가 어제 구현 한 부분이다

modules에서 redux모듈로 counter.js와 todos.js를 만들고 index.js에서 combinedReducers로 합쳐서 rootReducer를 만들어 준 후에 rootReducer를 이용해서 store를 만들어주고

만들어진 store를 컨테이너컴포넌트인 CounterContainers.js 에서 접근해서 상태값과 디스패치를 받아서

프레젠테이션컴포넌트인 Counter.js에게 props로 필요한 값을 전달해서

상태값과 dispatch함수를 화면구현에 사용했다.

 

오늘은 여기에 저번에 Redux모듈로 만들어놓고 사용하지 않은 todos를 이용하는 todolist를 만들어주겠다

 

화면을 구성하는 요소인 프레젠테이션 컴포넌트부터 만들었다.

 

components / Todos.js

import React, { useState } from 'react';
import Todolist from './Todolist';

const Todos = ({onCreate,onToggle,todos}) => {
    const [text,setText] = useState("") //input에 들어갈 상태값.
    const onChange = (e) =>setText(e.target.value) //input태그에 값이 입력되면 상태값이변함
    const onClick = () =>{
        onCreate(text);
        /*
        (text) =>({
        	type:ADD_TODO,
        	todo:{id:nextId,text: text,done:false}
    	}) 
        */
        setText(''); // 등록한후에는 input창을 초기화하기위해서 상태값 비워줌
    }
    return (
        <div>
            <div>
                <input value={text} onChange={onChange}></input>
                <button onClick={onClick}>등록</button> 
            </div>
                <Todolist onToggle={onToggle} todos={todos}/>
        </div>
    );
};

export default Todos;

인풋과 등록창을 만들어주고 등록되었을때 화면에 뜨는 부분은 Todolist컴포넌트로 따로 만들었다.

input 태그에도 상태값을 하나 추가로 주기위해 따로 useState를 이용해서 상태값을 만들어줬다.

 

이제 할일을 추가했을 때 띄워줄 Todolist컴포넌트를 만들어준다.

 

components / Todolist.js

import React from 'react';

const Todolist = ({todos,onToggle}) => {
    return (
        <div>
            <ul>
                {todos.map(todo => <li key={todo.id} 
                onClick={()=>onToggle(todo.id)} 
                style={{textDecoration: todo.done ? 'line-through':'none'}}>
                    {todo.text}
                </li>)}
            </ul>
        </div>
    );
};

export default Todolist;

Todos컴포넌트에서 onClick해주면 상태값의 todos에 저장된다.

case ADD_TODO:
   return[
      ...state, //원래있던값들을 저장하고
      action.todo // todo:{id:nextId,text: text , done:false} 새로운 todo추가 
    ]

todos를 Todolist.js에 넘겨주고 배열메서드인 map으로 <li></li> 안에 값을 넣어서 만들어준다. 

li를 클릭하면 isDone이 토글되고

isDone이 false일 때는 유지하고 true가 되면 밑줄을 그어주도록 스타일도 적용해 준다.

style={{textDecoration: todo.done ? 'line-through':'none'}}

 

isDone을 토글 시켜줄 onToggle은 TodosContainer에서 만들어서 전달된다.

onToggle은 아이디를 전달받아서

case TOGGLE_TODO:
     return state.map(todo => todo.id === action.id ? {...todo, done:!todo.done} : todo )
default:

todos를 다시 맵으로 돌려서 해당하는 id와 같은 아이디가 있으면 todo.done을 토글 시켜준다.

 

 

 

어제 했던 redux를 이어서 한 건데 코드를 한번 더 읽어보고 다시 써보니까 이제 동작원리가 조금은 이해가 되는 것 같다.

여기저기서 불러쓰는 게 많아서 복잡해보였는데 불러서 쓰는 요소들을 밑에 주석으로 써가면서 보니까 읽기에도 편하고 뭐하는 함수였는지 바로바로 알수있었다. 주석은 좀 더 간결하게 쓰는게 좋을 것 같지만 일단은 내가 이해를 해야 하니 길어도 어쩔 수 없다..ㅋㅋㅋ