const element = <h1>Hello JSX</h1>;
// Eg 1. 잘못된 코드 ❌
function Example() {
return (
<h1>Hello World!</<h1>
<p>Welcome to my blog</p>
);
}
// Eg 2. 올바른 코드 🔥
function Example() {
return (
<div>
<h1>Hello World!</<h1>
<p>Welcome to my blog</p>
</div>
);
}
<h1>
태그와<p>
태그를 한 묶음으로 생성할 때 하나의 루트 요소로 묶어주지 않으면 React가 친절하게 Failed to Compile 에러를 뱉어준다. <div>
요소로 모든 걸 감싸주면 된다. <fragment>
// Eg 3. Fragment
function Example() {
return (
<fragment>
<h1>Hello World!</<h1>
<p>Welcome to my blog</p>
</fragment>
);
}
// Eg 4. Empty Fragment
function Example() {
return (
<>
<h1>Hello World!</<h1>
<p>Welcome to my blog</p>
</>
);
}
<div>
사용을 피하고 싶거나 스타일 관련 코드가 복잡해지는 것을 방지하기 위해 <fragment>
를 사용하면 된다. DOM에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. (JSX 사용시 하나의 루트 요소만 반환해야 하는데, fragment는 일종의 투명 부모 요소 역할을 해준다)<> </>
를 사용해도 똑같은 효과를 볼 수 있다. // Eg 5. JavaScript 표현식 사용
function Welcome() {
const name = 'James';
return (
<h1>Welcome to my blog!</h1>
<p>{name}</p>
);
}
{ }
안에 코드를 작성하면 된다. <p>
태그 안에서 name
을 중괄호로 감싸서 사용했기 때문에 James
라는 값에 접근할 수 있게 된다. // Eg 6. 외부에서 if문 사용
function Example() {
let intro = '';
let login = 'Y';
if(login === 'N') intro = <p>비회원 유저입니다.</p>;
else intro = <p>회원가입 완료한 유저입니다.</p>;
return (
<>
{intro}
</>
);
}
// Eg 7. 내부에서 삼항연산자 사용
function Example() {
let intro = '';
let login = 'Y';
return (
<>
{login === 'Y'
? (<p>회원가입 완료한 유저입니다.</p>)
: (<p>비회원 유저입니다.</p>)
}
</>
);
}
// Eg 8. &&, || 연산자 사용
function Example() {
let intro = '';
let login = 'Y';
return (
<>
{loginYn === 'Y' && <div>회원가입 완료한 유저입니다.</div>}
</>
);
}
undefined
및 null
값은 에러를 발생시킨다. 따라서 OR연산자는 특정 값이 undefined
이거나 null
일 때 렌더링하고자 하는 내용이 있을 때 주로 사용된다. function Example() {
return (
<>
<div className="user-name">James</div>
</>
);
}
class
라고 작성한다. class
는 특정 요소의 클래스 명이 아니라 class를 생성할 때 사용되는 문법이기 때문에 컴파일러의 오류를 초래할 수 있다. 때문에 JSX 에서는 특정 요소에 클래스를 부여하기 위해 class
대신 className
이라고 작성해야 한다. function Example() {
const style = {
backgroundColor: '#fff',
fontSize: '24px'
}
return (
<div style={style}>Welcome to my blog!</div>
);
}
font-size
처럼 두 단어 중간에 -
를 써서 작성한다. -
는 dash의 역할이 아닌, 빼기 연산자를 뜻하기 때문에 JSX 에서 font-size
라고 입력하는 경우 font 빼기 size로 인식하게 된다.font-size
처럼 두 개 이상의 단어를 합친 스타일링 요소는 fontSize
처럼 camelCase를 사용해서 작성해야 한다. querySelector
, classList.add
, appendChild
같은 여러 메서드를 util 함수로 묶어 놓고 사용하는 경우가 많았다. 1. 갓대희의 작은 공간 블로그 - 2. JSX란? (정의, 장점, 문법)
2. 코딩애플 - React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법)