구문 강조 표시와 자동 완성 기능으로 JSX 코드를 편집하세요. 완료 후 복사하세요.
설치가 필요하지 않습니다.
기능:
100% 무료
코드 오프라인 편집
문법 강조 표시
자동 완성
자동 들여쓰기
실행 취소/다시 실행
코드 복사
전체 화면으로 크기 조정 가능
개인 정보 보호 중심. 코드는 업로드되지 않습니다.
import React, { useState } from 'react';
function QnA() {
const [question, setQuestion] = useState('');
const [answer, setAnswer] = useState('');
const handleQuestionChange = (event) => {
setQuestion(event.target.value);
};
const handleSubmit = (event) => {
event.preventDefault();
if (question.toLowerCase() === 'what is this web app?') {
setAnswer(
<div>
<p>이 웹 앱은 구문 강조, 자동 완성 및 기타 많은 기능을 갖춘 코드 편집기입니다!</p>
<p>소프트웨어를 설치할 필요 없이 브라우저에서 직접 코드를 작성하고 실행할 수 있습니다.</p>
<p>구문 강조기는 코드를 아름답게 만들어주며, 자동 완성 기능을 통해 코드를 더 빠르고 정확하게 작성할 수 있습니다.</p>
<p>게다가 취소/다시 실행, 코드 복사 또는 내보내기, 오프라인 작업 등 다양한 기능을 제공합니다!</p>
</div>
);
} else {
setAnswer(<p>음, 무엇을 기다리고 있나요. 지금 코드 편집을 시작하세요.</p>);
}
};
return (
<div>
<h1>QnA 프로그램에 오신 것을 환영합니다!</h1>
<form onSubmit={handleSubmit}>
<label>
질문을 해주세요:
<input type="text" value={question} onChange={handleQuestionChange} />
</label>
<button type="submit">질문하기</button>
</form>
<div>{answer}</div>
</div>
);
}
export default QnA;