react 토글

권슬기·2023년 6월 29일
0
  const [isEdit, setIsEdit] = useState(false);
  const toggleIsEdit = () => setIsEdit(!isEdit);
  
  {isEdit ? (
        <>
          <button onClick={handleQuitEdit}>수정취소</button>
          <button onClick={handleEdit}>수정완료</button>
        </>
      ) : (
        <>
          <button onClick={handleRemove}>삭제하기</button>
          <button onClick={toggleIsEdit}>수정하기</button>
        </>
      )}

toggleIsEdit은 수정하기의 onClick이다. toggleIsEdit은 isEdit을 토글처럼 반전시키는 코드다. 토글을 이용하면 {isEdit~} 처럼 false일때랑 true일때 보여주는 모습을 다르게 할 수 있다.

profile
병아리 프론트엔드 개발자

0개의 댓글