createelement 2

[자바스크립트] QnA 구현하기 innerHTML, createElement (+goNext, appendchild, for i in )

작업관리자 열기(코드 구조 확인): Ctrl+Shift+I  qnalist 코드를 작업관리자 console에서 열어보면 구조가 나옴.Key와 Value로 이루어져 있고q라는 key에 질문(q)가 있고a라는 key에 배열 3개(array(3))이 있고 -> a는 answer와 와 type이라는 value로 이루어져있다.  type이 4개가 있어서 사용자가 누르는 값에 따라 cow, tiger, dragon, chick의 결과를 띄워줌****object형식의 자료는 .으로 자료를 찾을 수 있음.innerHTML 정의:Element 속성(property) innerHTML 은 요소(element) 내에 포함 된 HTML 또는 XML 마크업을 가져오거나 설정한다. innerHTML 사용하는 방법이미 우리는 다량..

Java script 2024.11.26

[리액트] JSX 정의(react.createElement), 장점, 사용법(중괄호{})

-JSX 정의자바스크립트 문법 확장한 것javascript+ xml/ html -JSX 코드const element = hello, world!;대입연산자(=)는 오른쪽에 있는 변수를 왼쪽에 대입. 왼쪽코드는 javascript 코드, 오른쪽 코드는 html 코드 - React.createElement 함수: JSX코드를 JavaScript 코드로 변환함.- jsx는 html의 ,을 사용하고 있음. -createElement의 파라미터 -type(유형)-[props](속성)-[...childerem](엘리먼트가 포함하고 있는 자식 엘리먼트)  즉, react에서 jsx를 쓰는 것이 필수는 아님! createElement함수를 사용하면 되기 때문임.하지만 jsx 사용하면 코드 간결+ 생산성,가독성 높아짐...

React 2024.11.21