미라클 메모리

목차

input 수정하기 구현

게시글에는 삭제하기 버튼과 수정하기 버튼이 존재한다. 이때, 수정하기 버튼을 누른다면 수정을 할 수 있는 UI가 사용자에게 보여져야한다.

수정하기 버튼을 누를경우 textarea가 활성화 되어 내용을 수정할 수 있다.

isEdit

// src/DiaryItem.js
const [isEdit, setIsEdit] = useState(false);

해당 상태값은 수정하기 버튼을 눌렀을 때의 상태값을 의미한다. 상태값이 false면 보여주지 않고 true면 보여주게 함으로써 <textarea>태그를 보여줄지 말지 결정한다

<div className="content">
        {isEdit ? (
          <>
            <textarea
              ref={localContentInput}
              value={localContent}
              onChange={(e) => setLocalContent(e.target.value)}
            />
          </>
        ) : (
          <>{content}</>
        )}
</div>

isEdit의 상태값이 변경되어 활성화된 textarea에 값을 입력하면 onChange 이벤트에 의해서 LocalContent의 상태값이 변경된다.

localContent에 저장되는 값은?

const [localContent, setLocalContent] = useState(content);

localContent 에 기본적으로 저장되는 값은 props로 전달되는 content의 값이다. 아직 content의 흐름을 모르겠다. 내가 update한 값은 state끌어 올리기를 통해 상태값이 변경된다. 변경된 값을 다시 content를 통해서 전달받는다.

이벤트 함수

{isEdit ? (
        <>
          <button onClick={handleQuitEdit}>수정 취소</button>
          <button onClick={handleEdit}>수정완료</button>
        </>
      ) : (
        <>
          <button onClick={handleRemove}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}

먼저 isEdit의 상태에 따라서 수정버튼을 누르기 전까지는 아래와 같은 UI가 보인다.