[React] JSX

❗아래 내용은 [리액트를 다루는 기술] 책에서 공부한 내용을 요약하였습니다.

 

JSX란

자바스크립트의 확장문법이며, XML과 매우 비슷하게 생김

JSX를 사용하면,,,

• 편하게 렌더링 가능
• HTML코드와 유사해서 보기 쉽고, 익숙
• 컴포넌트를 HTML태그 쓰듯이 사용하면서 활용도가 높음

예시)

import React from 'react';

function App(){
	return(
          <div>
            <h1>리액트 안녕!<h1>
            <h2>잘 작동하니?<h2>
          <div/>
     );
 }
 export default App;

 

위의 코드처럼 h1태그와 h2태그가 div태그 하나로 감싸져있다.

이렇게 리액트 컴포넌트에서 요소 여러 개를 하나의 요소로 감싸는 이유?

컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문

 

조건부 연산자

JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다.

 

//=== 조건부 연산자 사용
import React from 'react';

function App(){
	const name = '리액트';
    return (
    	<div>
        	{name==='리액트' ? (<h1>리액트입니다<h1>):(<h1>리액트가 아닙니다<h1>)}
        </div>
    );
}
export default App;

 

위의 코드는 === 조건부 연산자(삼항연산자)를 사용하였다.

(조건) ? (조건이 True일때) : (조건이 False일 때)

위의 방식으로 위으 코드는 '리액트입니다'가 결과로 나타날 것이다.

 

//And 연산자(&&)을 사용
function App(){
	const name = '뤼액트';
    return <div>{name==='리액트' && <h1>리액트입니다.</h1>}</div>;
}
export default App;

 

이 코드는 앞의 삼항연산자를 사용하였지만 : 표시가 아닌 &&(and연산자)를 사용했다.

&&(and연산자)는 : 와 비교해서, true일 때의 결과만 입력받고, false를 렌더링 할때는 null과 마찬가지로 아무것도 나타내지 않는다.

그렇다면, 이 코드는 조건이 false를 렌더링하기 때문에 아무것도 출력이 되지 않겠죠?

 

😲잠깐! 이 이후의 부분은 제가 공부를 하다 개인적인 궁금증으로 공부한 부분입니다!

제가 리액트에 관해 공부를 하다가 소소하게 의문이 들었던 점은 인라인 스타일링 부분 예제를 하고 있던 중에 코드에서 style ={{}} 이와 같이 중괄호가 두번 들어가는 것이었습니다. 왜 중괄호가 한번이 아니라 두번 들어가는 걸까요?

일단 코드를 한 번 봐볼까요?

function App(){
	const name = '리액트';
    return (
    	<div
        	style={{ //여기서 왜 중괄호가 2개인 걸까?
            	backgroundColor : 'black',
                color: 'aqua',
                fontsize: '48px',
                fontWeight: 'bold',
                padding: 16 //단위 생략시 px
             }}
         >
         {name}
         </div>
      );
 }
 export default App;

 

리액트에서는 변수는 중괄호로 묶어줘야한다는 사실은 다 알고있죠? 

그럼 나머지 중괄호 하나는 왜  쓰는 걸까요?

바로! object 타입이라 있는 것입니다.

저는 바로 object타입이라고 하니까 제대로 이해가 안됐었는데요.

풀어쓰면 이런 뜻입니다! 아래 코드를 봐주세요

const style1={
	backgroundColor: black
}
render(){
	return(
    	<div style={style1}>
        	hello react
        </div>
    );
}

 

위의 코드를 봤을 때 style1을 변수니까 중괄호로 한 번 묶어주었고, 저 style1이 곧 위에서 backgroundColor로 쓰여있다보니 이를 처음 코드처럼 풀어쓰게 되면 중괄호로 한 번 더 묶어주는 것이다.

❗결론❗

밖 중괄호 : 변수 묶어주는것

안 중괄호 : object 타입