[React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기

html문서를 react에서 열고 태그 요소를 하나 만들어서 확인해봤다.

[React] 순수 html파일에서 react 사용하기

 

태그에 스타일 주기

createElement의 null로 남아있는 두 번째 인자가 스타일이 들어가는 자리다.

스타일 값을 저장해 두 번째 인자에 넣어줬다.

글자색이 파란색으로 바뀌는 것을 확인할 수 있다.

 

스타일을 두번째 자리에 직접 넣어 줄 수도 있다.

갈색 테두리의 div가 생성됬다.

태그 중첩하기

text내용이 있던 곳에 다시 createElement를 호출하여 h1태그를 만들었다.

갈색 테두리의 div태그안에 파란색 스타일이 입혀진 h1태그가 중첩된 것을 볼 수 있다.

이어서 계속 메소드를 호출해 다른 태그들도 생성했다.

div태그안에 중첩으로 여러 태그를 생성하고 스타일을 입히는 것까지 알아봤다.