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

안녕하세요. 선생님
늦은 시간인데도 답변해주셔서 감사합니다(꾸벅)

선생님께서 말씀해주신대로 useSelector를 써봤는데요.
useSelector가 초기값만 읽고, updateReducer에 의해 상태가 업데이트되면,
업데이트 된 값을 읽지 못합니다....

1. console.log(title)이라고 썼는데, 아무것도 뜨지 않습니다
2. Modal 컴포넌트에 제목을 입력을 해도 상태 변화를 읽지를 못합니다.
어디서 잘못 된걸까요??

const TodoItem = () =>{


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

export default TodoItem;


   
   

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 rootReducer = combineReducers({
    update: updateReducer,
    check: checkReducer,
});

export default rootReducer;

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;