[React] JSX 문법 정리
미리보기 띄우고 시작(터미널에서 npm start)
app.js에서 <div> 하나만 남기고 시작
근데 js파일에서도 html 코드 작성 가능하네? (<div>)<- 실은 html이 아니라 JSX임. .js파일에서 쓰는 html 대용품
JSX 문법
1. 태그는 무조건 닫아준다. ( Self-Closing Tags )
대부분의 HTML요소들은 두 가지의 태그를 사용한다. 오프닝태그<div>, 그리고 클로징태그</div>
그러나 <img>, <input>과 같은 몇몇의 html요소들은 한 태그만 사용한다.이 단일 태그 요소에 속하는 태그를 셀프 클로징 태그( Self-Closing Tags )라고 한다. JSX는 Self-Closing Tags의 경우에도 끝에 /를 붙여 닫아줘야한다.
JSX에서는 반드시 태그를 닫아야 한다.
<input type = "text" />
<br />
<img />2. 최상위 태그(부모 태그) 는 오직 하나만 있어야 한다.
JSX에서는 최상위에 있는 태그가 여러 개 있으면 안된다. 다른 말로는 병렬 기입을 할 수 없다.
위 코드처럼 최상위에 div 태그가 2개 존재하고 있으면 에러가 발생한다.
따라서 아래처럼 하나의 태그로 여러 태그를 감싸 작성해야 한다.
<div>,<React.Fragment>,<> 세가지를 사용할 수 있다.
- <div> - 많이 사용하지만, 단순히 부모태그로 사용하기 위해 의미 없이 div태그를 자주 사용하게 되면 시맨틱한 마크업 작성에 방해가 된다. 자원낭비
- <React.Fragment> - div와 같은 별도의 노드를 추가하지 않고 여러 개의 자식을 감싸줄 수 있다
import React, { Fragment } from 'react'
코드 상단에 다음과 같이 작성하면
<React.Fragment>를 <Fragment>로 표기할 수 있다.
- <> - <React.Fragment>의 단축 문법. 가장 간편하지만 해당 태그에서는 props를 설정할 수 없다는 특징을 기억하자.
3. JSX의 표현식 - { } (데이터바인딩)
JSX에서는 자바스크립트 표현식을 사용할 수 있다. 이때, {} 중괄호를 사용한다.
{ } 내부에는 변수, 수식, 속성 등 유효한 JavaScript 표현식을 작성할 수 있게 된다.
//html
document.querySelector("h4").innerHTML = post;
/*JSX*/
<h4>{ post }</h4>변수에 있던 자료를 html에 넣고 싶으면 위처럼 길게 작성해야 했는데
JSX에서는 { } 중괄호를 사용하여 변수를 넣고싶은 곳에 넣으면 된다.
4. class 넣을 땐 className
JavaScript에서는 class는 예약어라서 class가 선언되기 때문에, JSX에서는 className으로 사용해야한다.
// bad
<div class = "id"></div>
// good
<div className = "password"></div>
5. JSX에서의 모든 Property 이름은 CamelCase(카멜케이스) 사용
CSS 속성은 스네이크표기법을 사용하였지만 react에서는 카멜케이스 표기법을 사용한다.
예로 들면
font-size : X
fontSize : O
위처럼 하이픈기호('-')는 JavaScript에서 뺄셈 기호로 사용되기 때문에 붙여서 작성하되 두 번째 단어의 첫 문자를 대문자로 작성해야한다.
6. 인라인 스타일 적용 시 객체 사용하기
인라인 스타일은 스타일 속성을 직접 태그의 속성으로 지정하는 방식으로 스타일링을 구현하는 방법이다. JSX에서도 인라인 스타일을 사용할 수 있는데, 작성 규칙이 기존의 HTML, JavaScript와 다르다.
JSX에서의 인라인 스타일은 아래 코드와 같이 객체를 사용해야 한다.
<div style={{ backgroundColor: 'red', color: 'white' }}>Hello World</div>
스타일 속성은 객체 형태로 지정하며, 객체 내부에서는 CSS 속성을 CamelCase로 작성한다. 그리고 속성값은 따옴표 대신 중괄호로 감싸준다.
style = {{ 스타일명 : '값' }} ← 오브젝트 자료 형식으로 넣어야한다.
7. if 문 대신 조건부 연산자
JSX 내부의 자바스크립트에서는 if 문을 사용할 수 없다.
JSX 내부에서 조건부 렌더링을 할 때는 보통 삼항 연산자를 사용하거나, AND연산자(&&)를 사용한다.
8. 주석
{/* 내용 */}, 태그 사이에 //내용 으로 작성 가능
<div>
{/* 주석 내용 */}
<div// 태그 사이에 주석 내용>
my-app
</div>
</div>
아래 보기를 통해 맞는 코드를 고르시오.
<h4 style="color : red">블로그 제목</h4> //1번
<h4 style={{color : 'red', fontSize : '16px'}}>{ post }</h4> //2번
<h4 style={{color : 'red', font-size : '16px'}}>{ post }</h4> //3번
<h4 style={color : 'red', font-size : '16px'}>{ post }</h4> //4번해설
1. html이 아닌 JSX임 JSX에서는 스타일 속성을 작성하려면 중괄호 열고 작성해야한다.
2. 정답
3. font-size가 아닌 fontSize라고 작성해야한다.
4. 중괄호 열고 또 중괄호 열어서 오프젝트 파일 형식으로 작성해야한다.
(참고) 에러메세지는 터미널/ 미리보기 브라우저에서 확인 or 크롬 개발자도구 콘솔에서 확인
(참고) css파일 쓰려면 상단에서 import 'css파일경로';
**오브젝트 자료가 뭐임?
참고