인프런 커뮤니티 질문&답변

안녕하세요. 선생님

선생님 말씀대로 useSelector를 사용해 보려고,
로컬스토리지 관련 코드들은 삭제했습니다.

원하는 구현기능)
질문은 Modal 컴포넌트에서 리듀서에 의해 업데이트된 상태를,
todoItem 컴포넌트로 가져와서 사용이 가능한가요?
todoItem 컴포넌트로 가져와서 todoData에 집어넣고 싶습니다...
그래서 updateReducer에서 ADD_ITEM case를 읽을때 그때 그 상태를
todoItem 컴포넌트로 가져와서 사용이 하고 싶습니다.


질문)
1. 위에 기능을 useSelector만 알면 가능할까요?
2. 리덕스에 4단계 액션, 디스패치, 리듀서, 스토어 중 스토어 부분,
저장했다가 필요할때 꺼내쓰는 부분을 잘 모르겠어요.
어떤 추가적인 개념 공부가 필요할 까요?

const Modal = ({onClick}) =>{

  const [state, dispatch] = useReducer(updateReducer, initialState)

  const handleModalClick = (e) => {
    e.stopPropagation(); // 이벤트 버블링 막기
  };

  //사용자가 입력한 값을 추적하는 함수
  const handleInputChange = (e) =>{
   const {name, value} = e.target;
   dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value})
  };

  //클릭으로 적은 모든 내용을 한번에 전달
  const addItem = () =>{
  dispatch({type:'ADD_ITEM'});
  };

return(
    <ModalBackGround onClick={onClick}>
    <ModalView onClick={handleModalClick} >
    <div className = "titleContainer">
    <img className="dot" src = {dot} alt="icon"></img> 
    <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input>
    <img onClick={addItem} className="edit" src={edit} alt="icon"></img>
    </div>
    <div className="date">
    <div className='일자'>일자</div>
    <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input>
    <div>~</div>
    <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input>
    </div>
    <div className='contentContainer'>
    <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}>
    </textarea>
    </div>
    </ModalView>
    </ModalBackGround>
)
};

export default Modal;

export const updateReducer = (state=initialState, action)=>{
  
 switch(action.type){
  case 'UPDATE_TITLE': 
    return{...state, title: action.payload};
  case 'UPDATE_STARTDATE':
    return{...state, startDate: action.payload};
  case 'UPDATE_ENDDATE':
    return{...state, endDate:action.payload};
  case 'UPDATE_CONTENT':
    return {...state, content: action.payload};
  case 'ADD_ITEM':
    return  {...state, id: Number(state.id)+1}
    //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다
   // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다
    default:
    return state;
 }
};

const TodoItem = () =>{


   const [state, dispatch] = useReducer(checkReducer, todoItem)
   const [todoData, setTodoData] = useState(todoItem);
   
   const handleCheck = (id) =>{
      dispatch(checkBox(id));
    };
   
return(
   <SeveralItemContainer>
   {
    todoData.map((item)=>{
      return (
      <TodoItemContainer key={item.id}>
      <TitleContainer>
      <img className ="dot" src={dot} alt="icon"></img>
      <div className="title">{item.title}</div>
      <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img>
      </TitleContainer>
      <div className="contentcontainer">
      <div className="content">{item.content}</div>
      </div>
      </TodoItemContainer>
      )
    })
   }
    </SeveralItemContainer>
)
};

export default TodoItem;