$$config title: [ReactJS] ReactJS 이해하기 2. ReactJS로 element 생성 (a.k.a. 어려운 방법) keywords: - ReactJS - createElement - ... $$ # React를 사용하기 위해서 : react와 react-dom을 import해야 함. (구현하려는 ` ``` React 규칙 : HTML을 코드(body 안)에 작성하지 않음. # ReactJS 기초 ? - React : 어플리케이션이 interactive하도록 만들어주는 라이브러리 - ReactDOM : React를 통해서 javascript에 생성한 Element를 HTML에 두는 역할 -> body에 글을 쓰지 않는 대신, ReactDOM이 알아서 HTML에 생성해줌. 즉, Javascript를 이용해 element를 생성하고 React JS(react-dom)가 HTML로 번역(translate) # ReactJS와 VanillaJS의 동작방식 차이 | JS 종류 | 동작 방식 | |--|--| | 바닐라JS | HTML을 먼저 만들고 그걸 Javascript로 가져와서 HTML을 수정하는 방식 | | ReactJS | 모든 것이 Javascript에서 시작하고 이를 HTML에 적용 (즉, ReactJS가 결과물인 HTML을 업데이트 하는 방식) | => ReactJS는 유저에게 보여질 내용을 컨트롤 할 수 있음 # ReactJS : createElement (a.k.a. 엘리먼트 생성하는 '' 어려운 ' 방법 -> 절대 쓰지 않음.) - 1단계. root 설정하기 ( element를 render할 위치(= root) ) ```js

... ``` - 2단계. render 시킬 위치 지정 (ReactDOM 이용) ```js ``` - 3단계. createElement : const 타입을 이용해서 변수를 선언하고 " React.createElement() "를 이용해서 생성 ```js const h3 = React.createElement( ~~~ ); ``` # React.createElement() 의 3가지 argument(인자) ????? - 첫번째 인자 : 생성하고자 하는 element 이름 ! 무조건 HTML 태그와 똑같은 이름이어야 함. - 두번째 인자 : properties(a.k.a. props) = 속성 ?? - 속성 : id, class name, function, style 등이 들어갈 수 있음. 속성들은 `,` 을 이용해서 구분 - 속성 표현 방식 : ` 속성 : 해당 속성 기능/이름 ` 속성의 기능이 긴 경우나 style은 `{ ~ }`(중괄호)를 이용. - 속성으로 함수를 주는 방식 : `함수명: () => 함수구현코드` ??? event listener(함수구현)를 하는 방식은 onClick, onMouseEnter 등과 같이 on으로 시작. - 세번째 인자 : element에 넣을 텍스트 = content! conent에는 엘리먼트들을 넣을 수 있는데 2개 이상은 `[ , ]`을 이용함. # 예제 ```js

```