Share
Sign In
JSX의 기초 문법
jsx와 HTML
//src > index.js
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));앞서 작성한 src 폴더에 index 파일을 살펴보면 render의 첫번째 인자로 html 태그 문법을 사용할 수 있다고 배웠습니다. 이를 jsx문법이라고 하는데, h1대신 p태그 또는 div 태그를 사용하여도 제대로 동작하는 것을 볼 수 있습니다.
하지만 기존의 html 코드와 완벽하게 같다고 할 수 없습니다.
대표적인 것이 class 태그와 for태그입니다.
jsx에서 class 속성
예를 들어 html 태그에 class 속성을 추가하고 싶다면 다음과 같이 작성하면 될 것 같아보입니다.
ReactDOM.render(<div class="c1">hello world</div>, document.getElementById('root'));하지만 이때 class는 javaScript에서 class 문법인 다음과 충돌을 일으킵니다.
class card{
flip(){
console.log("flip!!")
}
}따라서 jsx에서는 다음과 같이 고쳐서 사용합니다.
ReactDOM.render(<h1 className="root2">hello world</h1>, document.getElementById('root'));그럼 아래와 같이 class 속성이 추기된 것을 확인할 수 있습니다.
jsx에서 for 속성
for 태그를 살펴보면 아래와 같이 form 태그를 작성했습니다.
ReactDOM.render(
<form>
<label for="name">이름</label>
<input id="name" type="text" />
<label for="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));이때 for역시 마찬가지로 javaScript의 반복문 for와 일치해 충돌을 일으킵니다.
아래와 같이 수정함으로써 해결할 수 있습니다.
ReactDOM.render(
<form>
<label htmlFor="name">이름</label>
<input id="name" type="text" />
<label htmlFor="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));그 밖에 이벤트핸들러
또한 그 밖에 모두 소문자로 작성했던 Event Handler 들은 첫 단어 이후 첫문자를 대문자로 하는 카멜케이스라고하는 표기법으로 작성하면 됩니다.
<input id="usrId" type="text" onblur="" onfocus="" onmousedown="" />html에서는 위와 같이 모두 소문자로 작성했다면,
<input id="usrId" type="text" onBlur="" onFocus="" onMouseDown="" />위와 같이 첫단어 이후 첫문자를 대문자로 하는 카멜케이스 표기법으로 작성하면 됩니다.
프래그먼트
위에서 다룬 jsx문법에는 중요한 점이 한가지 있습니다.
반드시 하나의 태그로만 사용해야 한다는 것 입니다. 예를 들어 아래와 같이 p태그 두개를 사용한다면 에러가 뜨는 것을 볼 수 있습니다.
ReactDOM.render(
<p>hello world</p>
<p>hello world!!!!!</p>,
document.getElementById('root')
);
하지만 아래와 같이 p태그를 div 태그로 감싸면 에러가 뜨지 않는 것을 볼 수 있습니다.
ReactDOM.render(
<div>
<p>hello world</p>
<p>hello world!!!!!</p>,
</div>
document.getElementById('root')
);하지만 JSX에서 지원하는 프래그먼트 태그를 사용하면 불필요한 div 태그를 없엘 수 있습니다.
import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<Fragment>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</Fragment>,
document.getElementById('root')
);Fragment 태그를 입력하면 자동으로 'react'라는 객체가 import 된 것을 볼 수 있습니다.
생각보다 Fragment 태그는 잘 쓰이기 때문에 아래와 같이 축약해서 사용하기도 합니다. 만약 축약한다면 react 객체를 불러오지 않아도 됩니다.
//import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</>,
document.getElementById('root')
);
테스트
여기까지 배운것들을 테스트해 보겠습니다.
create-react-app으로 프로젝트를 만들고 public 폴더와 src 폴더에 필요없는 부분을 정리합니다.
(public > index.html과 src > index.js을 제외한 파일을 삭제)
public > index.html의 필요 없는 부분을 지우고 body태그 내에 div 태그를 만들어 id 속성을 root로 지정해줍니다.
src > index.js 파일의 필요없는 부분을 지우고 아래와 같은 html 코드가 root라는 id를 갖는 div 태그에 적용되도록 수정합니다.
<!--HTML-->
<h1 id="title">가위바위보</h1>
<button class="hand">가위</button>
<button class="hand">바위</button>
<button class="hand">보</button>브라우저에 아래와 같이 결과 화면을 출력합니다.
정답 확인하기
React 홈으로 돌아가기
React.js
메인으로 돌아가기
jsx와 HTML
//src > index.js
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));앞서 작성한 src 폴더에 index 파일을 살펴보면 render의 첫번째 인자로 html 태그 문법을 사용할 수 있다고 배웠습니다. 이를 jsx문법이라고 하는데, h1대신 p태그 또는 div 태그를 사용하여도 제대로 동작하는 것을 볼 수 있습니다.
하지만 기존의 html 코드와 완벽하게 같다고 할 수 없습니다.
대표적인 것이 class 태그와 for태그입니다.
jsx에서 class 속성
예를 들어 html 태그에 class 속성을 추가하고 싶다면 다음과 같이 작성하면 될 것 같아보입니다.
ReactDOM.render(<div class="c1">hello world</div>, document.getElementById('root'));하지만 이때 class는 javaScript에서 class 문법인 다음과 충돌을 일으킵니다.
class card{
flip(){
console.log("flip!!")
}
}따라서 jsx에서는 다음과 같이 고쳐서 사용합니다.
ReactDOM.render(<h1 className="root2">hello world</h1>, document.getElementById('root'));그럼 아래와 같이 class 속성이 추기된 것을 확인할 수 있습니다.
jsx에서 for 속성
for 태그를 살펴보면 아래와 같이 form 태그를 작성했습니다.
ReactDOM.render(
<form>
<label for="name">이름</label>
<input id="name" type="text" />
<label for="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));이때 for역시 마찬가지로 javaScript의 반복문 for와 일치해 충돌을 일으킵니다.
아래와 같이 수정함으로써 해결할 수 있습니다.
ReactDOM.render(
<form>
<label htmlFor="name">이름</label>
<input id="name" type="text" />
<label htmlFor="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));그 밖에 이벤트핸들러
또한 그 밖에 모두 소문자로 작성했던 Event Handler 들은 첫 단어 이후 첫문자를 대문자로 하는 카멜케이스라고하는 표기법으로 작성하면 됩니다.
<input id="usrId" type="text" onblur="" onfocus="" onmousedown="" />html에서는 위와 같이 모두 소문자로 작성했다면,
<input id="usrId" type="text" onBlur="" onFocus="" onMouseDown="" />위와 같이 첫단어 이후 첫문자를 대문자로 하는 카멜케이스 표기법으로 작성하면 됩니다.
프래그먼트
위에서 다룬 jsx문법에는 중요한 점이 한가지 있습니다.
반드시 하나의 태그로만 사용해야 한다는 것 입니다. 예를 들어 아래와 같이 p태그 두개를 사용한다면 에러가 뜨는 것을 볼 수 있습니다.
ReactDOM.render(
<p>hello world</p>
<p>hello world!!!!!</p>,
document.getElementById('root')
);
하지만 아래와 같이 p태그를 div 태그로 감싸면 에러가 뜨지 않는 것을 볼 수 있습니다.
ReactDOM.render(
<div>
<p>hello world</p>
<p>hello world!!!!!</p>,
</div>
document.getElementById('root')
);하지만 JSX에서 지원하는 프래그먼트 태그를 사용하면 불필요한 div 태그를 없엘 수 있습니다.
import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<Fragment>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</Fragment>,
document.getElementById('root')
);Fragment 태그를 입력하면 자동으로 'react'라는 객체가 import 된 것을 볼 수 있습니다.
생각보다 Fragment 태그는 잘 쓰이기 때문에 아래와 같이 축약해서 사용하기도 합니다. 만약 축약한다면 react 객체를 불러오지 않아도 됩니다.
//import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</>,
document.getElementById('root')
);
테스트
여기까지 배운것들을 테스트해 보겠습니다.
create-react-app으로 프로젝트를 만들고 public 폴더와 src 폴더에 필요없는 부분을 정리합니다.
(public > index.html과 src > index.js을 제외한 파일을 삭제)
public > index.html의 필요 없는 부분을 지우고 body태그 내에 div 태그를 만들어 id 속성을 root로 지정해줍니다.
src > index.js 파일의 필요없는 부분을 지우고 아래와 같은 html 코드가 root라는 id를 갖는 div 태그에 적용되도록 수정합니다.
<!--HTML-->
<h1 id="title">가위바위보</h1>
<button class="hand">가위</button>
<button class="hand">바위</button>
<button class="hand">보</button>브라우저에 아래와 같이 결과 화면을 출력합니다.
정답 확인하기
React 홈으로 돌아가기
React.js
메인으로 돌아가기
jsx와 HTML
//src > index.js
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));앞서 작성한 src 폴더에 index 파일을 살펴보면 render의 첫번째 인자로 html 태그 문법을 사용할 수 있다고 배웠습니다. 이를 jsx문법이라고 하는데, h1대신 p태그 또는 div 태그를 사용하여도 제대로 동작하는 것을 볼 수 있습니다.
하지만 기존의 html 코드와 완벽하게 같다고 할 수 없습니다.
대표적인 것이 class 태그와 for태그입니다.
jsx에서 class 속성
예를 들어 html 태그에 class 속성을 추가하고 싶다면 다음과 같이 작성하면 될 것 같아보입니다.
ReactDOM.render(<div class="c1">hello world</div>, document.getElementById('root'));하지만 이때 class는 javaScript에서 class 문법인 다음과 충돌을 일으킵니다.
class card{
flip(){
console.log("flip!!")
}
}따라서 jsx에서는 다음과 같이 고쳐서 사용합니다.
ReactDOM.render(<h1 className="root2">hello world</h1>, document.getElementById('root'));그럼 아래와 같이 class 속성이 추기된 것을 확인할 수 있습니다.
jsx에서 for 속성
for 태그를 살펴보면 아래와 같이 form 태그를 작성했습니다.
ReactDOM.render(
<form>
<label for="name">이름</label>
<input id="name" type="text" />
<label for="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));이때 for역시 마찬가지로 javaScript의 반복문 for와 일치해 충돌을 일으킵니다.
아래와 같이 수정함으로써 해결할 수 있습니다.
ReactDOM.render(
<form>
<label htmlFor="name">이름</label>
<input id="name" type="text" />
<label htmlFor="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));그 밖에 이벤트핸들러
또한 그 밖에 모두 소문자로 작성했던 Event Handler 들은 첫 단어 이후 첫문자를 대문자로 하는 카멜케이스라고하는 표기법으로 작성하면 됩니다.
<input id="usrId" type="text" onblur="" onfocus="" onmousedown="" />html에서는 위와 같이 모두 소문자로 작성했다면,
<input id="usrId" type="text" onBlur="" onFocus="" onMouseDown="" />위와 같이 첫단어 이후 첫문자를 대문자로 하는 카멜케이스 표기법으로 작성하면 됩니다.
프래그먼트
위에서 다룬 jsx문법에는 중요한 점이 한가지 있습니다.
반드시 하나의 태그로만 사용해야 한다는 것 입니다. 예를 들어 아래와 같이 p태그 두개를 사용한다면 에러가 뜨는 것을 볼 수 있습니다.
ReactDOM.render(
<p>hello world</p>
<p>hello world!!!!!</p>,
document.getElementById('root')
);
하지만 아래와 같이 p태그를 div 태그로 감싸면 에러가 뜨지 않는 것을 볼 수 있습니다.
ReactDOM.render(
<div>
<p>hello world</p>
<p>hello world!!!!!</p>,
</div>
document.getElementById('root')
);하지만 JSX에서 지원하는 프래그먼트 태그를 사용하면 불필요한 div 태그를 없엘 수 있습니다.
import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<Fragment>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</Fragment>,
document.getElementById('root')
);Fragment 태그를 입력하면 자동으로 'react'라는 객체가 import 된 것을 볼 수 있습니다.
생각보다 Fragment 태그는 잘 쓰이기 때문에 아래와 같이 축약해서 사용하기도 합니다. 만약 축약한다면 react 객체를 불러오지 않아도 됩니다.
//import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</>,
document.getElementById('root')
);
테스트
여기까지 배운것들을 테스트해 보겠습니다.
create-react-app으로 프로젝트를 만들고 public 폴더와 src 폴더에 필요없는 부분을 정리합니다.
(public > index.html과 src > index.js을 제외한 파일을 삭제)
public > index.html의 필요 없는 부분을 지우고 body태그 내에 div 태그를 만들어 id 속성을 root로 지정해줍니다.
src > index.js 파일의 필요없는 부분을 지우고 아래와 같은 html 코드가 root라는 id를 갖는 div 태그에 적용되도록 수정합니다.
<!--HTML-->
<h1 id="title">가위바위보</h1>
<button class="hand">가위</button>
<button class="hand">바위</button>
<button class="hand">보</button>브라우저에 아래와 같이 결과 화면을 출력합니다.
정답 확인하기
React 홈으로 돌아가기
React.js
메인으로 돌아가기
jsx와 HTML
//src > index.js
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));앞서 작성한 src 폴더에 index 파일을 살펴보면 render의 첫번째 인자로 html 태그 문법을 사용할 수 있다고 배웠습니다. 이를 jsx문법이라고 하는데, h1대신 p태그 또는 div 태그를 사용하여도 제대로 동작하는 것을 볼 수 있습니다.
하지만 기존의 html 코드와 완벽하게 같다고 할 수 없습니다.
대표적인 것이 class 태그와 for태그입니다.
jsx에서 class 속성
예를 들어 html 태그에 class 속성을 추가하고 싶다면 다음과 같이 작성하면 될 것 같아보입니다.
ReactDOM.render(<div class="c1">hello world</div>, document.getElementById('root'));하지만 이때 class는 javaScript에서 class 문법인 다음과 충돌을 일으킵니다.
class card{
flip(){
console.log("flip!!")
}
}따라서 jsx에서는 다음과 같이 고쳐서 사용합니다.
ReactDOM.render(<h1 className="root2">hello world</h1>, document.getElementById('root'));그럼 아래와 같이 class 속성이 추기된 것을 확인할 수 있습니다.
jsx에서 for 속성
for 태그를 살펴보면 아래와 같이 form 태그를 작성했습니다.
ReactDOM.render(
<form>
<label for="name">이름</label>
<input id="name" type="text" />
<label for="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));이때 for역시 마찬가지로 javaScript의 반복문 for와 일치해 충돌을 일으킵니다.
아래와 같이 수정함으로써 해결할 수 있습니다.
ReactDOM.render(
<form>
<label htmlFor="name">이름</label>
<input id="name" type="text" />
<label htmlFor="usrId">아이디</label>
<input id="usrId" type="text" />
</form>,
document.getElementById('root'));그 밖에 이벤트핸들러
또한 그 밖에 모두 소문자로 작성했던 Event Handler 들은 첫 단어 이후 첫문자를 대문자로 하는 카멜케이스라고하는 표기법으로 작성하면 됩니다.
<input id="usrId" type="text" onblur="" onfocus="" onmousedown="" />html에서는 위와 같이 모두 소문자로 작성했다면,
<input id="usrId" type="text" onBlur="" onFocus="" onMouseDown="" />위와 같이 첫단어 이후 첫문자를 대문자로 하는 카멜케이스 표기법으로 작성하면 됩니다.
프래그먼트
위에서 다룬 jsx문법에는 중요한 점이 한가지 있습니다.
반드시 하나의 태그로만 사용해야 한다는 것 입니다. 예를 들어 아래와 같이 p태그 두개를 사용한다면 에러가 뜨는 것을 볼 수 있습니다.
ReactDOM.render(
<p>hello world</p>
<p>hello world!!!!!</p>,
document.getElementById('root')
);
하지만 아래와 같이 p태그를 div 태그로 감싸면 에러가 뜨지 않는 것을 볼 수 있습니다.
ReactDOM.render(
<div>
<p>hello world</p>
<p>hello world!!!!!</p>,
</div>
document.getElementById('root')
);하지만 JSX에서 지원하는 프래그먼트 태그를 사용하면 불필요한 div 태그를 없엘 수 있습니다.
import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<Fragment>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</Fragment>,
document.getElementById('root')
);Fragment 태그를 입력하면 자동으로 'react'라는 객체가 import 된 것을 볼 수 있습니다.
생각보다 Fragment 태그는 잘 쓰이기 때문에 아래와 같이 축약해서 사용하기도 합니다. 만약 축약한다면 react 객체를 불러오지 않아도 됩니다.
//import { Fragment } from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<>
<p className="root2">hello world</p>
<p className="root2">hello world!!!</p>
</>,
document.getElementById('root')
);
테스트
여기까지 배운것들을 테스트해 보겠습니다.
create-react-app으로 프로젝트를 만들고 public 폴더와 src 폴더에 필요없는 부분을 정리합니다.
(public > index.html과 src > index.js을 제외한 파일을 삭제)
public > index.html의 필요 없는 부분을 지우고 body태그 내에 div 태그를 만들어 id 속성을 root로 지정해줍니다.
src > index.js 파일의 필요없는 부분을 지우고 아래와 같은 html 코드가 root라는 id를 갖는 div 태그에 적용되도록 수정합니다.
<!--HTML-->
<h1 id="title">가위바위보</h1>
<button class="hand">가위</button>
<button class="hand">바위</button>
<button class="hand">보</button>브라우저에 아래와 같이 결과 화면을 출력합니다.
정답 확인하기
React 홈으로 돌아가기
React.js
메인으로 돌아가기
jsx와 HTML
//src > index.js
import ReactDOM from 'react-dom';
ReactDOM.render(<h1>hello world</h1>, document.getElementById('root'));앞서 작성한 src 폴더에 index 파일을 살펴보면 render의 첫번째 인자로 html 태그 문법을 사용할 수 있다고 배웠습니다. 이를 jsx문법이라고 하는데, h1대신 p태그 또는 div 태그를 사용하여도 제대로 동작하는 것을 볼 수 있습니다.
하지만 기존의 html 코드와 완벽하게 같다고 할 수 없습니다.
대표적인 것이 class 태그와 for태그입니다.
jsx에서 class 속성
예를 들어 html 태그에 class 속성을 추가하고 싶다면 다음과 같이 작성하면 될 것 같아보입니다.
ReactDOM.render(<div class="c1">hello world</div>, document.getElementById('root'));하지만 이때 class는 javaScript에서 class 문법인 다음과 충돌을 일으킵니다.
class card{
flip(){
console.log("flip!!")
}
}따라서 jsx에서는 다음과 같이 고쳐서 사용합니다.