react appendChild 질문 도와주세요ㅜㅠㅜㅠ

Question

"DIV 생성" 이라는 글자를 누르면 밑에 "새로 생성된 DIV입니다." 라는 div 가 생기고 "새로 생성된 DIV입니다." 를 다시 누르면 사라지는 코드를 만드려고 합니다.createDIV 함수로 만들고 있는데 html에서는 appendChild로 해서 만들었는데 react로 하려니까 더 어려운 거 같아요ㅠ createDIV 함수를 어떻게 해야 저렇게 구현할 수 있을까요? 아님 함수로 구현하는게 아닌가요..? 도와주세요ㅠㅠ import React from 'react'; document.title = '문서의 동적 구성' function Ex810multiComp () { return (

) } const CreateH3 = () =>

DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제

const CreateHr = () =>

const CreateP1 = () =>

DOM 트리에 동적으로 객체를 삽입할 수 있습니다. createElement(), appendChild(), removeChild() 메소드를 이용하여 새로운 객체를 생성, 삽입, 삭제하는 예제입니다.

const CreateD = () =>

createDIV}>DIV 생성

const CreateP2 = () =>

프론트엔드조하 · Accepted Answer

<button/> <div> <h2>appendchild</h2> // 여기에 div 붙어야함 </div> 만약, 버튼 클릭했을 때 appendChild로 <div> 태그나 컴포넌트를 appendChild한다고 생각해보세요. const appendExample &#61; () &#61;> { const [appendDiv, setAppendDiv] &#61; useState(false); return ( <button onclick&#61;{()&#61;> setAppendDiv(!appendDiv)}/> <div> <h2>append 예제</h2> { appendDiv ? <div/> : <></> } </div> ) }; 리액트에서 표현식은 { } 괄호 안에 넣어주면 됩니다. 그래서 appendDiv 가 true 일때만 <div> 태그를 보여준 셈이 됩니다. 또 버튼을 누르면 appendDiv는 false 로 토글 될 것이구요. ( div 붙는 것이 왔다 갔다 하고 싶지 않으면 그냥 setAppendDiv(true) 혹은 setAppendDiv(false) 로 유지할 수 있습니다. ) 제가 제안 드린 방법은 상태로, appendChild를 뗐다 붙였다 하는 것입니다. 리액트가 자바스크립트의 문법 그대로 가져오지 않아서 어려울 순 있지만, 오히려 더 쉬워지기도 했습니다. 먼저 리액트 개념을 한번 보고 js에 맞는 리액트 구현을 하시는게 더 빠르게 이해되실 수 있으실거라 생각이 듭니다. :)

프론트엔드조하 · Answer

방법은 여러가지가 있을 것 같습니다.만약, 모달창이라고 생각해본다면const [modal,setModal] = useState(false) 로, onclick 시, setModal(!modal) 로 상태를 변경해주고,{ modal ? <모달창 컴포넌트/> : <>} 이런식으로 토글 시킬 수 있습니다.

dlfpire · Answer

&#64;프론트엔드조하새벽에 답변 감사합니다! 아직 제가 기초 공부중이라 조하님 답변을 제대로 이해하지 못한 거 같습니다..onclick시 새로운 div를 appendChild 같이 자식 노드를 붙이는 방법으로 하고 싶었는데 방법이 없을까요?아님 조하님 답변이 그런 방법일까요? 제가 아직 react에 많은 지식이 없어서 잘 모르겠네요,,ㅠㅠ

react appendChild 질문 도와주세요ㅜㅠㅜㅠ

3개의 답변

Q&A 목록