React 주요 개념 JSX

JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다.

JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요.

 

JSX

// JSX Style
<header id="header">
    <ul class="nav">
    	<li>홈</li>
    	<li>마이페이지</li>
    	<li>로그아웃</li>
    </ul>
</header>

React.createElement()

// React.createElement() Style
React.createElement(
    "header",
    {id: "intro"},
    React.createElement(
    	"ul",
        {className: "nav"},
        React.createElement(
            "li",
            "홈"
        ),
        React.createElement(
            "li",
            "마이페이지"
        ),
        React.createElement(
            "li",
            "로그아웃"
        )
    )

)

예시 코드와 같이 JSX는 중첩된 React.createElement()를 사용하는 것보다 훨씬 간단하고 직관적인 구조를 가지고 있습니다. 특히 html과 유사한 구조를 가지고 있어 html에 숙련된 사람이라면 쉽게 작성이 가능합니다.

---

JSX에 표현식 사용하기

JSX의 중괄호 안에는 모든 javascript 표현식을 넣을 수 있습니다.

const color = 'green';
const elem = <h1>I like {color}</h1>;

ReactDOM.render(
	elem,
    document.getElementById('root')
);

 

javascript 표현식 

표현식은 값 하나로 귀결되는 자바스크립트 코드 조각(snippet)입니다. 표현식은 우리가 원하는 만큼 길어질 수 있지만 언제나 동일한 값이 나오지 않습니다.

2 + 2 * 3 / 2  // 5

(Math.random() * (100-20)) + 20  // random int

functionCall()  // function

window.history ? useHistory() : noHistoryFallback()  // ? = if, : =  else

1+1, 2+2, 3+3  // 2, 4, 6

declaredVariable  // 선언된 변수 ex) var qq; let rr; const ee = 1;

true && functionCall()  // boolean and function

true && declaredVariable  // boolean and 선언된 변수

자세한 내용은 따로 포스팅 하겠습니다.

 

아래 코드는 함수 호출 표현식을 사용한 방법입니다.

funciton totalValue(valueList) {
	return valueList.money + valueList.car + valueList.stock;
}

const valueList = { // object
    money: 100000000,
    car: 20000000,
    stock: 30000000
};

const elem = {
    <p>My assets are {totalValue(valueList)} won</p>
};

ReactDOM.render(
    elem,
    document.getElementById('root')
)

---

JSX도 표현식중 하나입니다.

컴파일이 끝나먼, JSX 표현식이 정규 javascript 함수를 호출하고 javascript 객체로 인식됩니다. 즉 JSX를 if 구문 및 for loop 안에 사용하고, 변수에 할당하고, 인자로서 받아들이고, 함수로부터 반환할 수 있습니다.

 

JSX 속성 정의

속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다. 

const elem = <div tabIndex="0"></div>;

const element = <img src={user.avatarUrl}></img>;  // 어트리뷰트에 표현식을 사용한 경우

 

JSX에 삽입된 모든 값을 렌더링 하기 전에 이스케이프 하므로, 애플리케이션에서 명시적으로 작성되지 않은 내용은 주입되지 않습니다. 모든 항목은 렌더링 되기 전에 문자열로 변환됩니다.

 

JSX는 객체를 표현합니다.

Babel은 JSX를 React.createElement() 호출로 컴파일합니다.

const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

 

이러한 객체를 React 엘리먼트라고 하며, React는 이 객체를 읽어서 DOM을 구성합니다.

---

JSX에서의 if 문

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

대신 JSX 밖에서 if문을 사용하거나, JSX 내부에 중괄호를 만들어 그 안에서 조건부 연산자를 사용해야 한다.

const name = “javascript”;
   return (
      <>
         {name === “javascript” ? (
            <p>this is {name}</p>
            ) : (
            <p>not javascript</p>
         )}
      </>
   );

 

JSX에서의 AND(&&) 연산자

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

const name = “javascript”;
   return (
      <>
         { name === “javascript” ? <p> = js</p> : null }
      </>

      {/* or (더 짧게) */}
      <>
         { name === “javascript” && <p>js</p> }
      </>
   );

 

JSX에서의 스타일링

react에서 DOM요소에 스타일을 적용할 때는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다.

만약 스타일 속성 중에 font-size와 같은 -(하이픈)이 포함되는 경우 속성 이름에서 - 를 제거해 카멜 케이스로 변경해 작성해야 한다.

const name = “react”;
const style = {
  backgroundColor: ‘#222’,
  color: ‘#fff’,
  fontSize: ‘14px’
}
return <div style={style}>{name}</div>

// 엘리먼트에 직접 스타일 지정
return <div style={{backgroudColor: ‘#222’, color: ‘#fff’, FontSize: ‘14px’}}>{name}</div>

 

JSX에서의 class

JSX에서는 class가 아닌 className을 사용해야 한다. class도 사용이 가능하긴 하지만 className으로 변환이 필요하다는 경고가 메시지가 발생한다.

 

JSX에서의 주석

JSX에서 주석을 작성하는 방법은 일반 javascript와는 조금 다릅니다.

return(
	{/* JSX 안에서의 주석 /*}
    <div className="test">  // 이 방식도 사용 가능하다.
    {test}</div>
    // 사용 불가
    /* 사용 불가 */
)