[TIL] JSX문법 I

kihyeon8949·2020년 2월 14일
0

JSX란??

:리액트 컴포넌트를 작성할 때 쓰는 문법
->HTML 이랑 비슷하지만 지켜야하는 규칙이 있다.


<규칙>

규칙 1. 태그는 꼭! 닫혀야한다.

잘못된 예시)

이렇게 쓰면 오류가 난다.

이렇게 고쳐주어야한다.

*셀프클로징 태그로 닫아주는것이 더 좋다.
<input type = "text"/>


규칙 2. 하나의 엘리먼트로 꼭! 감싸자.

잘못된 예시)

아래와 같이 코드를 작성하면 에러가 난다.

그렇다면..?.? 감싸주면 된다~!
=> 두개 이상의 elements는 꼭 하나로 감싸줘야한다.

div를 이용하여 elements들을 감싸게되면 불필요한 div가 생겨,

스타일 관련 설정을 하면서 코드가 꼬이게 될 수도 있고/ table 관련 태그를 작성 할 때 번거로워질 수도 있다.

=> < Fragment>를 활용하여 해결하자.

Fragment를 사용하면, 불필요한 div가 사라진다.


<JSX안에서 자바스크립트 값 사용하기>

- { } 중괄호를 사용한다.

->이렇게 코드를 작성하게되면,

hello react

-> 라는 문구가 뜬다.


<조건부 렌더링>

JSX 내부에서 조건부 렌더링을 할 때 => 보통 삼항 연산자 / AND 연산자를 사용한다.

반면에 if 문을 사용 할 수가 없다.

if문을 사용하려면 IIFE(즉시 실행 함수 표현) 을 사용해야한다. (-> 다음에 포스팅 예정!)

1. 삼항연산자
:삼항연산자는 true 일 때와 false 일 때, 다른 어떤 것을 보여주고자 할 때 사용.

2. AND연산자
: 단순히 조건이 true 일 때만 보여주고, false 경우 아무것도 보여주고 싶지 않을 때 사용한다.

가끔 복잡한 조건을 작성해야 할 때도 있다. 그러한 조건들은 웬만하면 JSX 밖에서 로직을 작성하는것이 좋다. 하지만, 꼭 JSX 내부에서 작성해야 한다면, 아래와 같이 IIFE 를 사용합니다.

[ if문 대신 switch문을 작성해도 된다~! ]

위의 조건문은 다음과 같이 화살표 함수(?)로 고쳐서 쓸 수도 있다.

화살표 함수는 this, arguments, super 개념이 없는 익명 함수이다. -> 요것도 다음에 정리......;;;
profile
어떻게 되겠죠 뭐...!!!

0개의 댓글