리액트에서 중첩노드를 만들고 간단한 스타일을 줘봤다.
보다시피 div 태그안에 태그를 중첩해 세개를 생성했는데,
태그 하나를 생성할 때마다 메소드를 호출하는 것은 번거로운 일이다.
JSX - html을 JS로 변환
CDN방식으로 JSX를 사용하기 위해 해당 링크를 긁어온다.
긁어온 링크를 스크립트 태그에 소스를 걸어주면 JSX를 사용할 수 있다.
JSX를 사용해 태그를 생성하는 방법이다.
일일히 createElement를 할 필요없이 html처럼 태그를 작성하더라도
JSX가 html을 JS로 변환해주어 스크립트 태그안에서도 html태그문법을 사용할 수 있다.
또한 type을 text/javascript가 아닌 babel로 바꿔주길 바란다.
또한 JSX를 사용할 때 왼쪽처럼 하나의 태그안에 중첩해서 사용하는 건 가능하지만
오른쪽 처럼 하나의 태그가 닫히고 또 다른 형제 태그를 생성하는 것은 맞지않는다.
BootStrap이용해 태그에 스타일 주기
부트스트랩을 CDN방식으로 사용하기 위해 링크를 가져온다.
긁어온 링크를 붙여넣으면 부트스트랩을 사용할 수 있다.
JSX를 사용하면 태그에 class대신 className으로 클래스를 명시해준다.
각 div에 클래스로 부트스트랩의 스타일을 줬다.
col-2,col-10에 의해 div가 컬럼,2대10비율로 스타일이 입혀졌다.
'Front-end' 카테고리의 다른 글
[React] 컴포넌트에 조건문 주기, if, 3항 연산 (0) | 2022.06.05 |
---|---|
[React] 분해할당, Destructuring Assignment (0) | 2022.06.05 |
[React] 리액트에서 html태그에 스타일 입히고 중첩 태그 만들기 (0) | 2022.06.04 |
[React] 순수 html파일에서 react 사용하기 (0) | 2022.06.03 |
[React] 리액트 닷넷으로 시작하기 (0) | 2022.05.22 |