2.2 JSX와 자바스크립트

JSX와 자바스크립트

 

JSX안에서는 자바스크립트 표현식을 쓸 수 있다.

자바스크립트 값을 JSX안에서 렌더링 할 수 있다.

 

위와 같이 작성을 해서 자바스크립트를 JSX에서 사용할 수 있다.

 

웹 페이지에 정상적으로 나오는 것을 확인할 수 있다.

 

const 키워드에 대해서 잠깐 설명하자면 const 키워드를 사용하면 해당 값은 함수 단위가 아닌 블록 단위에서 쓰일 수 있다. let 키워드도 마찬가지로 scope가 블록단위다. 

let과 const는 한 블록 내에서 중복 선언이 불가능하다.

let과 const의 다른 점은 const는 값을 한 번 설정하면 바꿀 수 없다는 것이다. 반면 let은 값이 유동적으로 바뀔 수 있다.

 

let와 const와 다르게 var은 scope가 함수 단위이다.  

 

 

2.2.1 조건부 연산자

 

JSX에서 쓰이는 자바스크립트 표현식에서, if문은 쓰일 수 없다.

대신에 JSX 밖에서 if 문을 사용하여 사전에 값을 설정하거나, 

{ } 안에 '조건부 연산자(혹은 삼항연산자)'를 사용한다.

 

위 사진과 같이, { }안에 조건부 연산자를 사용한다.

조건(name이 HTML이다)이 맞으면, HTML이 맞다가 출력되고,

아니면 HTML이 아니다가 출력된다.

 

name은 HTML이라는 값을 갖고 있기 때문에 맞다고 출력된다.

 

 

2.2.2 AND 연산자와 조건부 렌더링

 

특정 조건을 만족할 때 내용을 보여 주고, 만족하지 않을 때 아예 아무것도 렌더링하지 않도록 코드를 만들어야 할 때가 있다.

이때 물론 조건부 연산자를 사용할 수 있다.

그러나 AND연산자(&&)를 이용할 수도 있다.

 

 

위와 같이 코드를 작성하면 HTML 맞다가 출력이 될 것이다.

그러나 만약 name의 값이 HTML이 아니고 abcd 였다면 HTML 맞다가 출력되지 않을 것이다.

조건이 true 라면 && 다음에 오는 요소가 나온다. 만약 조건이 false 라면, React는 이를 무시하고 건너뛴다.

 

&& 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false를 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.

그러나 false 값인 0은 예외적으로 화면에 나타날 수 있다.

 

 

이렇게 코드를 작성하면 화면에 0이 출력된다.

 

 

참조

• 김민준, 리액트를 다루는 기술, 길벗