728x90
App.js
import { useState } from "react";
export default function App(){
const [isEditing, setIsEditing] = useState(true); /* 초기값은 true */
/* handleEvent() 내용 */
function handleEvent(){
/* 옛날 방식 */
//setIsEditing(!isEditing);
/* 람다 방식 */
setIsEditing(() => !isEditing) /* handleEvent()를 발동시키면 isEditing이 False가 됨 */
console.log("이전상태는: " + isEditing); /* 이전값인 isEditing의 상태 확인 */
}
/* 초기에 뿌려줄 내용 */
let tag = ( /* isEditing이 True인 상태 */
<>
<span>홍길동</span>
<button onClick={handleEvent}>Edit</button> {/* handleEvent() 발동 */}
</>
)
/* 버튼을 클릭한 경우 */ /* setIsEditing(() => !isEditing)에 의해 발동 */
if(!isEditing){ /* isEditing이 False인 상태 */
tag = (
<>
<input></input>
<button onClick={handleEvent}>save</button> {/* 클릭 시isEditing이 False의 False가 됨(True) */}
</>
)
}
return (
<>
{tag}
</>
)
}
또다른 방식의 App.js(버튼 출력 방식 수정)
import { useState } from "react";
export default function App(){
/* isEditing변수는 setIsEditing함수에 의해 변경 */
const [isEditing, setIsEditing] = useState(true); /* 초기값은 true */
/* handleEvent() 내용 */
function handleEvent(){
/* 옛날 방식 */
//setIsEditing(!isEditing);
/* 람다 방식 */
setIsEditing(() => !isEditing) /* handleEvent()를 발동시키면 isEditing이 False가 됨 */
console.log("이전상태는: " + isEditing); /* 이전값인 isEditing의 상태 확인 */
}
/* 초기에 뿌려줄 내용 */
let tag = ( /* isEditing이 True인 상태 */
<>
<span>홍길동</span>
{/* *****수정된 부분(버튼 삭제)***** */}
</>
)
/* 버튼을 클릭한 경우 */ /* setIsEditing(() => !isEditing)에 의해 발동 */
if(!isEditing){ /* isEditing이 False인 상태 */
tag = (
<>
<input></input>
{/* *****수정된 부분(버튼 삭제)***** */}
</>
)
}
return (
<>
{tag}
{/* *****수정된 부분(버튼 추가)***** */}
<button onClick={handleEvent}>{(isEditing) ? "Edit" : "save"}</button>
</>
)
}
'단순 코드 기록 > React' 카테고리의 다른 글
| React_input 폼 (0) | 2024.03.15 |
|---|---|
| React_불변변수_JSON/Array (0) | 2024.03.14 |
| React_실시간 랜더링 (0) | 2024.03.14 |
| React_eventPreventDefault()와 StopPropagation() (0) | 2024.03.14 |
| React_버튼 계층구조 이벤트 처리 (0) | 2024.03.14 |