조회/삭제 기능 구현

Diary Page

const Diary =()=>{
    const nav=useNavigate();
    const param = useParams();
    const {onDelete}= useContext(DiaryDispatchContext);
  
    const data = useContext(DiaryStateContext);
    console.log(data);
    const dataR = data.filter((item)=> String(item.id)===String(param.id));
    const emotionId=dataR[0].emotionId;
    const onClick=()=>{
        if(confirm('삭제하시기를 원합니까?')){
            onDelete(Number(param.id));
            alert('삭제가 완료되었습니다');
            nav('/',{replace:true});
        }
    }
    // console.log(dataR);
    return (
        <div>
            <Header title={'일기장 보기'} leftChild={<Button text={'< 뒤로가기'} onClick={()=> nav(-1)}></Button>} rightChild={<Button text={'편집하기'} onClick={()=>nav(`/edit/${param.id}`)}></Button>} ></Header>
            <div>
                <View emotionId={emotionId} dataR={dataR}></View>
            </div>
            <div>
                <Button text={'삭제하기'} onClick={onClick}></Button>
            </div>
        </div>
    )
}

export default Diary;

• header 부분은 새 일기장 만들기와 동일하게 구축함과 동시에 왼쪽 버튼을 클릭하면 home으로 오른쪽 버튼을 클릭하면 편집하는 페이지로 이동하게 만듦
• 사용자가 작성한 일기장의 내용은 View 컴포넌트에서 처리하게 만듦
• 이때 전달한 데이터는 감정아이디와 파라미터로 받은 id로 찾은 데이터를 전달
• 아래 삭제하기 버튼을 누르면 useContext로 받은 onDelete 함수를 이용해 삭제되는 기능 구현

보완점

const emotionItem= emotionList.find((item)=> String(item.emotionId)===String(emotionId));

• 리스트에서 굳이 맵이나 필터를 사용하지말고 find 함수를 이용하여 찾자

const useDiary=(id)=>{
    const nav=useNavigate();
    const data= useContext(DiaryStateContext);
    const [curDiaryItem,setCurDiaryItem] = useState();
    useEffect(()=>{
        const currentDiaryItem= data.find((item)=> String(item.id)===String(id));
        if(!currentDiaryItem){
            window.alert('존재하지않는 일기입니다');
            nav('/',{replace:true});
        }
        setCurDiaryItem(currentDiaryItem);
    },[id]);

    return curDiaryItem;
}

export default useDiary;

• 별도의 후크파일을 만들어 만약 찾고자 하는 일기장 페이지가 없으면 미리 생성해 놓은 후크를 이용하여 null 데이터 처리에 신경쓰자

View Component

const View=({emotionId,dataR})=>{
    const list = emotionList;
    const data = list.filter((item)=> String(item.emotionId)===String(emotionId));
    const emotionName = data[0].emotionName;
    const date=getStringedDate(dataR[0].createdDate);
    console.log(dataR[0].createdDate);
    return(
        <div>
            <section>
                <h4>오늘의 날짜</h4>
                <input type="date" name="createdDate" id="" value={date} readOnly/>
            </section>
            <EmotionItem emotionId={emotionId} emotionName={emotionName}></EmotionItem>
            <section>
                <textarea name="" id="" value={dataR[0].content} readOnly></textarea>
            </section>
           
        </div>
    )
}

export default View

• 찾은 데이터의 정보를 뿌리는 역할을 맡은 View 컴포넌트이다
• 주의점은 input,textarea에서 readonly속성을 넣지 않으면 계속 오류가 뜬다
• 이 이유는 이전까지는 온 체인지 핸들러로 처리하거나 값을 입력받았는데 지금은 값입력을 받으면 안되기 때문이다