[React Native] JSX 란? / JSX 문법

반응형

JSX란?

JavaScript에서 XML을 추가한 확장형 문법이다.

XML(eXtensible Markup Language)은 태그(tag, <>)의 이름을 자유롭게 짓고 사용할 수 있는 문법이다. 이를 JavaScript에 적용 시킨 것이 바로 JSX이다.

​

실행하기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 JavaScript 형태의 코드로 변환된다.

​

* 바벨(Babel)

최신 자바스크립트 문법을 모든 브라우저가 이해하지 못하기 때문에, Babel을 통해 브라우저가 이해할 수 있는 문법으로 변환해주는 컴파일러이다. 초기의 바벨은 ES6 코드를 ES5 코드로 변환해 주는 일만 했지만, 현재는 리액트의 JSX문법도 처리해준다.

트렌스파일러는 소스를 입력 받으면 다른 소스로 변환하는 컴파일러의 일종이기 때문에 컴파일러라고 부르는 것은 문제가 되지 않는다.

 

바벨 진행 단계

1. 파싱(Parsing): 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계

2. 변환(Transforming): 추상 구문 트리를 변경

3. 출력(Printing): 변경된 결과물을 출력

​

React native는 JSX를 사용하지 않고 순수한 자바스크립트 코드를 사용할 수 있지만, React를 사용하는 중요한 이유 중 하나가 ’직관적’이다. JSX를 사용해서 컴포넌트를 구성하는데 쉽게 적응할 수 있다.

​

* 리액트를 사용하면서 코드를 보고 화면에 어떤 UI가 그려질지 충분히 예상 가능하다는 것을 ‘직관적’이라고 표현한다.

 

JSX 문법

1. 둘러싼 구조

컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나가 감싸는 형태여야 한다. 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져 있어야한다는 규칙 때문이다.

// 에러
return(
<Text>테스트1</Text>
<Text>테스트2</Text>
)

// 바깥을 View로 감싼 모습
return(
<View>
<Text>테스트1</Text>
<Text>테스트2</Text>
</View>
)

2. 변수 참조

JSX 안에서는 자바스크립트 표현식을 사용할 수 있다. JSX 내부에서 { }로 렌더링하면 된다.

const name = '리액트';
 return (
      <View>
          // 렌더링 // 리액트
          <Text>{name}</Text> 
          // name  
          <Text>name</Text>     
      </View>
 );

3. if문 대신 조건부 연산자

JSX 내부의 자바스크립트 표현식 내에서 if문을 사용할 수 없어서, 조건부 연산자(삼항 연산자)를 사용한다.

for문 대신 map(), else if과 switch문 대신 중첩 조건부 연산자,

 ==은 값만 같으면 true이지만, ===은 값의 타입까지 모두 같은지 비교한다.

 

* Map()이란

간단한 키와 값을 서로 연결(매핑) 시켜 저장하며 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있도록 한다.

기본 사용법: 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다.

  const name = '리액트';
  return (
   <View>
          {name === '리액트' ? <Text>리액트</Text> : <Text>리액트가 아님</Text> }
   </View>
  );

4. AND 연산자(&&)를 사용한 조건부 렌더링

&& 연산자는 참일 경우에만 수행하고, 거짓일 경우엔 아무 액션도 취하지 않는다.

(else문이 없는 조건문이라고 생각할 수 있다.)

   const name = “react”;
   return (
      <View> 
         { name === “리액트” ? <Text>맞아</Text> : null }  // 삼항 연산자
      </View>

      {/* or (더 짧게) */}
      <View>
         { name === “리액트” && <Text>맞아</Text> }
      </View>
  );

반응형

5. 인라인 스타일링

HTML에서 스타일을 지정할 땐 background-color와 같이 하지만, JSX에서는 -를 없애고 카멜 표기법으로 작성한다.

// 예:background-color -> backgroundColor
 const style = {
      backgroundColor: 'white',
      fontSize: '10px',
      fontWeight: 'bold'
  }

  return (
   <View style={style}>
       <Text>테스트</Text>
 	</View>
  )

6. class 대신 className

JSX가 렌더링 될 때 JSX의 ClassName 속성을 자동으로 class 속성으로 렌더링 한다.

className이 아닌 class로 설정해도 스타일이 적용되지만 console에 경고가 나타난다.

(리액트 v16 이상부터는 class를 className으로 변환시켜 주고 경고를 띄운다.)

CSS class를 사용하려면 className 속성을 사용해야 한다. 이는 일반적인 모든 DOM 요소들에 적용된다.

const name = “리액트”;
 return (
    <View>
        <Text className = “react”>
                     {name}</Text>
    </View>
 )

7. 꼭 닫아야 하는 태그

JSX에서는 태그를 닫지 않으면 오류가 발생한다. 닫는 태그가 없으면 컴파일 조차 되지 않는다.

<View></View>
<View />       //self-colsing 태그