목차
- JSX란?
- React.createElement 변환 예시
- JSX문법
📌JSX란?
자바스크립트의 확장 문법이며 XML과 비슷하게 생겼다.
작성한 코드를 일반 자바스크립트 형태의 코드로 변환
div와 span같은 HTML 태그를 사용할 수 있다.
📌 예시
📗 JSX 코드
function App() {
return (
<div>
Hello <b>react</b>
</div>
)
}📗 Rreact.createElement 변환
function App() {
return React.createElement("div", null,"Hello", React.createElement("b", null, "react"));
}반환 과정에서 알 수 있듯이 JSX 코드를 작성하지 않으면
줄이 바뀌거나 자식요소를 표현할 때 매번
React.createElement 함수를 사용해야하는 불편함이 있다.
📌 JSX문법
⭐ 1. 감싸는 요소
컴포넌트에 여러 요소가 있다면 반드시 🍀 부모 요소 하나로 감싸야 한다.
이유 : DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 DOM 트리 구조로 이루어져야 한다.
❌ 잘못된 표현 : 전체를 하나의 부모로 감싸지 않으면 오류 발생
⭕ 정상적인 표현
-
div 요소 사용하기
-
Fragment 기능 사용하기
-
Fragment의 다른 형태
⭐ 2. 자바스크립트 표현
자바스크립트 표현식을 작성하려면 JSX 내부에서 🍀 코드를 { }로 감싼다.
⭐ 3. If문 대신 조건부 연산자
🍀 삼항 연산자 사용하기
{조건부 ? ( a ) : ( b )}
조건부가 성립하면 a가 성립하지 않으면 b가 나타난다.
⭐ 4. AND 연산자(&&)를 사용한 조건부 렌더링
조건부 연산자에서 만족하지 않을 때 아무것도 렌더링 하지 않게 하기 위함
-
{조건부 ? a : null }
-
&&연산자 사용하기
결과 화면에 아무것도 없는 상태로 나오지만 예외적으로 숫자 0은 화면에 나타난다.
ex)
function App() {
const number = 0;
return (
number && <div>내용</div>
);
}→ 화면에 숫자 0이 출력된다.
⭐ 5. undefined를 렌더링하지 않기
undefined 값을 반환하여 렌더링하면 안됨
예외 조건
-
어떤 값이 undefined일 수도 있을 때는 🍀OR(||) 연산자를 사용해서 오류 방지하기
-
JSX 내부에서 undefined를 렌더링하는 것은 가능
-
값이 undefined 일 때 보여주고 싶은 문구 작성하기
⭐ 6. 인라인 스타일링
DOM 요소에 스타일을 적용할 때는 문자열 형태❌ 객체 형태⭕
스타일 표기는 카멜표기법 사용
ex) backgroundColor, fontSize, fontFamily
- style 객체를 미리 선언하고 불러오기
- 미리 선언하지 않고 직접 지정하기
→ 결과물
⭐ 7. class 대신 className
JSX에서 class명을 부여하기 위해서는 Class가 아닌 🍀className을 설정해야한다.
→ 결과물
⭐ 8. 반드시 닫아야 하는 태그
다른 말로는 self-closing 태그라고 한다.
html에서는 br, input 처럼 닫는 태그가 없어도 작동하는 아이들이 있는데
JSX에서는 꼭 닫는 태그를 넣어줘야한다.
ex)
<br></br>
<input></input>
또는
<br />
<input />⭐ 9. 주석
JSX 주석의 형태는 아래와 같이 사용하며
{/* */} html과 css에서 쓰이는
// 이나 /* */ 형태의 주석은 페이지 상에 그대로 노출된다.
