내일 배움 캠프 4기 TIL(22.12.13)

오늘의 공부내용

redux를 이용한 todolist 만들기 코드 뜯어보면서 열심히 이해하고 있다 내일이면 끝날거 같다.

파일 구조

기능 구현

• 리스트 추가

redux 

const ADD_LIST = "ADD_LIST"

// action
export const addList = (payload)=>{
    return{
        type:ADD_LIST,
        payload,
    }
}

// 초기 state
let list_number = 0;

const initialState = {
    Lists:[
        {
            id:list_number++,
            title:'리엑트 공부하기 ',
            content:'리엑트는 너무 어려워',
            complete:false,
        },
        {
            id:list_number++,
            title:'리엑트 공부하기 ',
            content:'리엑트는 너무 어려워',
            complete:false,
        },
    ]
  };
  
// 리듀서
 case ADD_LIST:
            return{
                ...state,
                Lists:[...state.Lists,action.payload]
            }

AddList.jsx

  const dispatch = useDispatch();

  const [title, setTitle] = useState("");
  const [content, setContent] = useState("");

// 리스트에 리스트 추가 핸들러
  const AddListHandler = (e)=>{
    if(title === ''||content === '') return;

    dispatch(
      addList({
        id:nextId(),
        title,
        content,
        complete:false,
      })
    )

    setTitle("");
    setContent("");
  }



    <div >

        <div >
          <label >제목</label>
          <input
          type="text"
          value={title}
          onChange={(e) => {
            setTitle(e.target.value);
          }} 
          /> 
          <label>내용</label>
          <input 
          type="text"
          value={content}
          onChange={(e) => setContent(e.target.value)}
          />
        </div>


        <button onClick={AddListHandler}>추가하기</button> 
                
      </div>

• 리스트 삭제

redux

const DELETE_LIST = "DELETE_LIST"

// action
export const deleteList = (payload)=>{
    return{
        type:DELETE_LIST,
        payload,
    }
}

// 리듀서

case DELETE_LIST:
            return{
                ...state,
              Lists:state.Lists.filter(list=>list.id!==action.payload),
            }

ToDoList.jsx

// state 가져오기
const dispatch = useDispatch();
const lists = useSelector((state) => state.Users.Lists);

// delete핸들러
 const deleteListHandler =(id)=>{
        dispatch(deleteList(id))
    }
 
 

• done workig 구현

ToDoList.jsx

// complete가 false 일때 working true 일때 done
   const listWork= lists.filter(list=>!list.complete)
    const listDone= lists.filter(list=>list.complete)
      <div>
            <div>
                <h2>Working..🔥</h2>
                <div>
          // map을 줘서 하나하나 return 내용을 줌
                 {listWork.map(list=>{
                    return (
                        <div>
                            <h3>{list.title}</h3>
                            <p>{list.content}</p>
                            <button onClick={()=>{deleteListHandler(list.id)}}>삭제하기</button>
		// complete true false일때 버튼 이름 변경
                            <button>{list.complete ? '취소':'완료'}</button>
                        </div>
                    )
                 })}   
                </div>
            </div>
            <div>
                <h2>Done..🎉</h2>
                    <div>
                    {listDone.map(list=>{
                        return (
                            <div>
                                <h3>{list.title}</h3>
                                <p>{list.content}</p>
                                <button onClick={()=>{deleteListHandler(list.id)}}>삭제하기</button>
                                <button>{list.complete ? '취소':'완료'}</button>
                            </div>
                        )
                    })}   
                </div>
            
            </div>
        </div>

고민한 부분

 const lists = useSelector((state) => state.Users.Lists);

state가지고 올때 state 값이 안넘어와서 1시간 정도 고민을 한거 같다
이유는 configStore.js안에

const rootReducer = combineReducers({
    Users,
}); 

이 Users가 안들어가서 계속 state를 못불러왔다.