수정 기능

Edit 페이지

const Edit=()=>{
    const nav =useNavigate();
    const {onDelete} = useContext(DiaryDispatchContext);
    const {onUpdate}=useContext(DiaryDispatchContext);
    const data = useContext(DiaryStateContext);
    const params =useParams();
    const [curDiaryItem,setCurDiaryItem] = useState();
    useEffect(()=>{
        const currentDiaryItem = data.find((item)=>String(item.id)===String(params.id));
        if(!currentDiaryItem){
            window.alert('존재하지 않는 일기입니다');
            nav('/',{replace:true});                      
        }
        setCurDiaryItem(currentDiaryItem);
    },[params.id]);
    const onClickDelete = ()=>{
        if(window.confirm('정말로 삭제하실겁니까?')){
            onDelete(params.id);
            nav('/',{replace:true});
        }
    }

    const onSubmit=(input)=>{
        if(window.confirm("일기를 정말 수정?")){
            onUpdate(params.id,input.createdDate.getTime(),input.emotionId,input.content);
        }
        nav('/',{replace:true});
    }
    return(
        <div>
            <Header title={'일기 수정하기'} leftChild={<Button text={'< 뒤로 가기'} onClick={()=>{
                nav(-1)}}></Button>} rightChild={<Button text={'삭제하기'} onClick={onClickDelete}></Button>}>
            </Header>
            <Editor onSubmit={onSubmit} initData={curDiaryItem}></Editor>
        </div>
    )
}

export default Edit

• const currentDiaryItem = data.find((item)=>String(item.id)===String(params.id));
• useContext로 전달 받은 데이터 중에서 아이디값과 파라미터로 받은 아이디 값이 같은 데이터 탐색
• 파라미터가 달라질 때마다 리렌더링 되어야 하니 params.id로 설정
• confirm으로 사용자 편리성 증대

Editor Component

const Editor=({onSubmit,initData})=>{
    const [differ,setDiffer]=useState();
    useEffect(()=>{
        if(initData){
            setDiffer(initData.emotionId);
            setInput({
                ...initData,
                createdDate: new Date(Number(initData.createdDate))
            })
        }
    },[initData])
    
    const nav=useNavigate();
    const[input,setInput]=useState({
        createdDate:new Date(),
        emotionId:3,
        content:""
    });
   console.log(initData);
   
 
    const onClickSubmit=()=>{
        onSubmit(input);
    }

    const onChangeInput=(e)=>{
        let name=e.target.name;
        let value=e.target.value;
        if(name==='createdDate'){
            value= new Date(value);
        }
    
        setDiffer(null);
        
        setInput({...input,[name]:value});

    }
  
    return(
        <div>
            <section>
                <h4>오늘의 날짜</h4>
                <input type="date" name="createdDate" id="" value={getStringedDate(input.createdDate)} onChange={onChangeInput}/>
            </section>
            <section>
                <h4>오늘의 감정</h4>
                <div>
                    {emotionList.map((item)=> <EmotionItem differ={differ} key={item.emotionId}{...item} isSelected={item.emotionId===input.emotionId} onClick={()=>onChangeInput({
                        target:{
                            name:'emotionId',
                            value:item.emotionId
                        }
                    })}></EmotionItem> )}
                </div>
            </section>
            <section>
                <h4>오늘의 일기</h4>
                <textarea name="content" id="" value={input.content} onChange={onChangeInput} placeholder="오늘은 어땟나요? "></textarea>
            </section>
            <section>
                <Button text={'취소하기'} onClick={()=>{
                    nav(-1);
                }}></Button>
                <Button onClick={()=>{
                    onClickSubmit();
                    nav(-1,{replace:true})
                }} text={'작성완료'}></Button>
            </section>
        </div>
    )
}

export default Editor

• initData를 값으로 전달 받아 수정하기를 누르면 기존에 입력되어있던 데이터가 화면상에 표시되도록 만듦

• onChangeInput에서 사용자가 EmotionItem을 클릭하면 differ를 초기화 함

• 이는 후에 나오는 EmotionItem 컴포넌트에서 기존에 입력되었던 emotionId를 초기화하여 클릭시 기존에 있던 배경색은 사라지게 만들고 새로 클릭한 배경색이 되게 만듦

EmotionItem Component

const EmotionItem=({emotionId,emotionName,isSelected,onClick,differ})=>{

    const isDefault = differ !== null && differ === emotionId;

   
    console.log(isDefault);
    return(
        <div>
            <div className={`EmotionItem ${isSelected ? `EmotionItem_on_${emotionId}`:""} ${isDefault ? `EmotionItem_default_${emotionId}`:""}`} tabIndex="0" onClick={onClick}>
                <img className="emotion_img" src={getEmotionImage(emotionId)} alt="" />
                <div className="emotion_name">
                    {emotionName}
                </div>
            </div>
        </div>
    )
}

export default EmotionItem

• const isDefault = differ !== null && differ === emotionId;: null값이면 false
• {isDefault ? EmotionItem_default_${emotionId}:""}}: true 일 때만 해당 css가 적용됨