[React] Project Levup - 메모 수정 기능 만들기

이전 작업으로 DB에 저장된 메모를 불러오는 것 까지 확인했다.

백엔드에서 수정및 삭제 기능을 구현했지만, 프론트엔드에서 부드럽게 구현할 수 있도록 구상을 해야했다.

구상 결과 각 메모를 반환하며, 수정 버튼을 눌렀을 때만 해당 메모가 수정되는 방향으로 정리했다.

그 전에, 수정 및 삭제 요청이 들어갈 때 각 메모의 ID 별로 처리할 수 있도록 컴포넌트를 세분화 시켰다.

 

1 .  컴포넌트 세분화 - 수정 전 코드

<div>
    {memo.map((item, index) => {
        return (
            <div key={index}> 
                { item._id.$oid }
                { item.content }
                <button> 수정 <button>
                <button> 삭제 <button>
            </div>)
    })}
</div>

 

2 . 컴포넌트 세분화 - 수정 후 코드

const EachMemo = ({ memoId, content }) => {
        return (
            <div id={ memoId } className='eachMemo'>
                { content }
                <button onClick={CickOption}> 수정 </button>
                <button> 삭제 </button>
            </div>
        )
    }

<div>
    {memo.map((item, index) => {
        return (
            <div key={index}> 
                <EachMemo
                    memoId={item._id.$oid}
                    content={item.content}
                />
            </div>)
    })}
</div>

 

최초 로드 시 수정이 불가능한 상태로 두고, 수정 버튼을 누른 이후에는 텍스트 수정이 가능하도록 한 다음

다시 수정(저장) 버튼을 누르면 저장되도록 구현하고자 하려고 한다. 수정 가능 여부 상태를 체크하기 위해 useState 를 사용.

수정이 불가능한 상태 (false) 일 때는 span 태그 안에 메모 내용을, 수정이 가능한 상태 (true) 일 때는 input 태그를 반환하여

이 기능을 구현하기로 했다.

 

3 . 초기 코드 - EachMemo

const [editable, setEditable] = useState(false);
const CickOption = (event) => {
        setEditable(!editable);
    };

const EachMemo = ({ memoId, content }) => {
        return (
            <div id={ memoId } className='eachMemo'>
                { editable ? <input value={ content }/> : <span> { content }</span>}
                <button onClick={CickOption}> 수정 </button>
                <button> 삭제 </button>
            </div>
        )
    }

문제가 있는듯 하다

 

위의 코드로 완료가 될 것이라고 생각했지만, 하나의 문제가 생겼다.

수정 버튼을 누르면 불러온 모든 메모가 수정 가능 상태로 변하고, 다시 수정 버튼을 누르면 수정 불가능한 상태로 변경된다.

해당 현상의 문제점은 EachMemo 밖에서 editable 변수를 선언했다는 것이다.

그 결과, editable 변수가 모든 EachMemo 컴포넌트에 영향을 주게 되어

하나의 수정 버튼을 클릭해도 모든 메모가 수정 가능 / 불가능 상태로 변하게 된 것이다.

이를 해결하기 위해서는 useState - editable 변수를 EachMemo 컴포넌트 안에서 선언해야 한다.

 

4 . 수정 코드 - EachMemo

const EachMemo = ({ memoId, content }) => {
        const [editable, setEditable] = useState(false);
        const CickOption = () => setEditable(!editable);

        return (
            <div id={ memoId } className='eachMemo'>
                { editable ? <input value={ content }/> : <span> { content }</span>}
                <button onClick={CickOption}> 수정 </button>
                <button> 삭제 </button>
            </div>
        )
    }

개별 메모 수정 가능

이제, 수정 버튼을 눌렀을 때 저장할 수 있도록 백엔드와 API 를 연결하면 완료.