TIL(2020.12.09)
1. JSX 기본문법
JSX란?
리액트를 작성할 때 사용하는 기본문법. HTML이랑 비슷하지만 몇 가지 규칙이 있음.
1. 태그는 꼭 닫혀있어야 한다.
- html에서는 input이나 br같이 가끔 안닫고 쓰는 태그가 있는데 리액트에서는 동일 태그 반복을 이용해 태그를 닫지 않으면 에러가 발생함(Unterminated JSX contents. JSX 콘텐츠가 끝나지 않았다)
- Self-closing Tag는 html과 동일하게 사용가능(ex. input, br)
2. 두개 이상의 elements는 반드시 하나의 element로 감싸져 있어야 한다.
//예
return (
<div> hello </div>
<div> Bye </div>
);
//must be wrapped error
return (
<div>
<div> Hello </div>
<div> Bye </div>
</div>
// Good!
- 그런데 element를 감싸기 위해 불필요한 추가 element를 사용하기 싫다면
- react v16.2부터 추가된 Fragment 기능을 사용하면 된다.
- element들에 대해 Fragment 태그로 감싸주면 코드상으로 불필요한 div가 조회되지 않음.
- Fragment 사용 전 문서 상단에서 component와 같이 Fragment import 필요
3. JS값 사용하기
JSX내부에서 변수 등 자바스크립트 값을 이용할 수 있다.
- 변수 사용시 js처럼 호출 전 변수선언이 되어야 하며 중괄호 내에서 호출해 사용
//예
<div>hello {변수명>!</div>
- js의 var, const, let 개념 그대로 적용됨
4. 조건부 렌더링
- 조건에 따라 화면 구성을 표시하는 것
- JSX 내부에서 조건부 렌더링을 할 때에는 보통 삼항연산자 또는 AND연산자 사용
//삼항연산자를 사용한 예
import React, { component } from 'react';
class App extends Component {
render() {
return (
<div>
{
1 + 1 === 2
? (<div>Yes</div>)
: <<div>No..</div>)
}
</div>
);
}
}
export default App;
- 삼항연산자를 사용해 조건부 렌더링을 구성할 때에는 위와 같은 형식으로 사용하게 된다.
- 삼향연산자를 이용할 때에는 true일때와 false일때 각각 다른 결과물을 보여줄 때 사용함.
- AND연산자는 true만 보여주고 false일때에는 아무것도 표시하지 않음.
//AND연산자 사용예
import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
{
1 + 1 === 2 && (<div>Yes!</div>)
}
</div>
);
}
}
export default App;
- 대부분 위의 두가지 연산자 사용법을 통해 해결하지만 가끔씩 복잡한 조건을 작성해야 할 때에는 JSX외부에서 로직을 작성하는 것이 좋음.
- 하지만 꼭 JSX 내부에서 작성해야 한다면 IIFE(즉시실행함수) 사용.
- 즉시실행함수를 사용할 때에는 if문을 사용할 수 있다.
///IIFE 사용예
import React, { Component } from 'react';
class App extends Component {
render() {
const value = 1;
return (
<div>
{
(function() {
if (value === 1) return (<div>one</div>);
if (value === 2) return (<div>two</div>);
if (value === 3) return (<div>three</div>);
})()
}
</div>
);
}
}
export default App;
- 위의 IIFE에서 if문을 사용했는데, if문과 화살표함수를 같이 사용하면 더욱 간단하게 코드를 작성할 수 있다.
///if문+화살표함수
(() => {
if (value === 1) return (<div>one</div>);
if (value === 2) return (<div>two</div>);
if (value === 3) return (<div>three</div>);
})()
- if문 대신 switch문을 사용해도 된다.
용어 및 추가 공부
- var, const, let
- 렌더링
- IIFE
- 화살표함수
- switch문
Author And Source
이 문제에 관하여(TIL(2020.12.09)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@skwlalsl93/TIL2020.12.09저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)