2. JSX

dana·2021년 11월 29일
0

React.js

목록 보기
3/20
post-thumbnail

JSX란 무엇인가

자바스트립트를 확장한 문법으로, React와 함께 사용된다.
React에서는 렌더링 로직이 UI 로직과 연결되어있다는 전제가 깔려있다. 그래서 별도의 파일에 마크업과 로직을 분리하는 대신, 둘 다 포함하는 컴포넌트를 만드는 방식으로 동작한다.
작성된 JSX 코드는 브라우저에서 실행되기 전에 번들링 과정에서 Babel을 통해 JS코드로 변환된다.

JSX는 이렇게 HTML을 변수에 할당하는 것처럼 보이는 코드다.
const greeting = <h1>hello World! </h1>;

JSX에 입력되는 요소들은 하나의 부모 노드로 감싸져 있어야한다.

const greeting = (
	<h1>
    	hello! 
    </h1>;
    <h1>
    	world! 
    </h1>;
)

-> ❎

const greeting = (
	<div>
      <h1>
          hello! 
      </h1>;
      <h1>
          world! 
      </h1>;
    </div>
)

-> ✅

하지만 이렇게 되면 쓸데없는 container태그가 함께 입력된다.
이렇게 태그를 남용하는 것을 방지하기 위해 사용하는 것이 <fragment>태그이다.

const greeting = (
	<fragement>
      <h1>
          hello! 
      </h1>;
      <h1>
          world! 
      </h1>;
    </fragment>
)

하지만 이것도 너무 길어보이니 더 짧게 <> </> 만 작성하기도 한다.

const greeting = (
	<>
      <h1>
          hello! 
      </h1>;
      <h1>
          world! 
      </h1>;
    </>
)

JSX에 표현식 포함하기

변수를 선언한 후, 중괄호 안에 변수를 넣어 사용하는 것도 가능하다.

let name = 'minju';
const greeting = <h1>hello {name}! </h1>;

JSX를 여러줄에 나눠 표현하고 싶다면 괄호로 묶어 주어야한다.

let name = 'minju';
const greeting = (
	<h1>
    	hello {name}! 
    </h1>;
)

JSX도 표현식

function getGreeting(user) {
  if (user) {
    return <h1>Hello, {formatName(user)}!</h1>;
  }
  return <h1>Hello, Stranger.</h1>;
}

값처럼 if구문 및 for loop에 사용 가능하고, 변수에 할당하고 인자로 사용되는 등 1급 객체의 특징을 갖고 있다.

JSX 조건식

하지만 js자체에 if문을 사용할 수 없기때문에, 삼항연산자를 사용한다.

let name = 'minju';
const greeting = (
	<div>
    	{name == 'minju' ? (
		<h1>
    			hello {name}! 
    		</h1>;
        ) : (
        	<h1>
    			hello new user! 
    		</h1>;
        )}
     </div>
);

만약 조건이 성립되지 않았을 때 아무것도 띄우고 싶지 않다면, null을 이용해서 표현 가능하다.

let name = 'minju';
const greeting = (
	<div>
    	{name == 'minju' ? (
		<h1>
    			hello {name}! 
    		</h1>;
        ) : null}
     </div>
);

이걸 &&를 이용해 더 짧고 간편하게 나타낼 수 있다.

let name = 'minju';
const greeting = (
	<div>
    	{name == 'minju' ? && <h1> hello {name}! </h1>;}
     </div>
);

이 때 조건문의 결과값이 숫자 0 이라면 예외적으로 화면에 출력됨.

undefined를 걸러내기 위해서 || 를 사용하는 방식도 있다.

JSX 속성 정의

속성에 카멜표기법으로 작성한다. 무 조 건
예를 들어 background-color 면 backgroundColor로 표기한다.

JSX는 자바스크립트로 변환되기 때문에 JS에서 사용중인 예약어를 속성으로 사용할 수 없다.
그래서 class를 표기할 때, html처럼 <div class="fruit"> 이 아니라 <div className="fruit"> 으로 표기해주어야 한다.

JSX에 스타일 속성 넣기

const style = {
	backgroundColor = blue;
    fontWeigh
}
const greeting = (
   <h1 style = {style}>
       hello! 
   </h1>;
)

JSX는 객체를 표현한다.

Babel은 JSX를 React.createdElement() 호출로 컴파일한다.

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

이 코드와

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

이 코드는 같은 코드다. 그리고 이렇게 작성된 코드는

// 주의: 다음 구조는 단순화되었습니다
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

위와 같은 react 엘리먼트 객체를 생성한다. react는 이 객체를 읽어 DOM을 구성하고 최신 상태로 유지하는데 사용한다.

참고
https://reactjs.org/docs/introducing-jsx.html
https://thebook.io/080203/

profile
PRE-FE에서 PRO-FE로🚀🪐!

0개의 댓글