리액트의 기본 기능 )) JSX

1.JSX란?

자바스크립트와 HTML을 섞어 사용하는 문법(자바스크립트 XML, JS확장 문법)
JSX문법을 이용하면 HTML 태그에서 자바스크립트의 표현식을 직접 사용가능하다.

 

2. JSX와 자바스크립트 표현식

- JSX에서 자주 사용하는 표현식

• 산술 표현식 { numA + numB }
• 문자열 표현식 { strA + strB }
• 논리 표현식 { string ( boolA || bool B ) }
• 사용할 수 없는 값 : 숫자, 문자열, 논리형, null, undefined를 제외한 값(사용 시 오류 발생함 => 객체 자료형의 값을 페이지에 렌더링하고 싶으면 프로퍼티 접근 표기법으로 값을 원시 자료형으로 바꿔주어야함.)

import React from 'react';
import './App.css';

const Body = () => {
    const objA = {
        a:1,
        b:2,
    }
	return (
    	<div>
        	<h1>body</h1>
            <h2>a: {objA.a}</h2>
            <h2>b: {objA.b}</h2>
        </div>
    );
}

export default App;

3. JSX 문법에서 지켜야 할 것들

• 닫힘규칙 : 여는 태그가 있으면 닫는 태그도 있어야 함.
• 닫힘태그가 없는 태그는 반드시 병기해야 함. <img /> <input />
• 최상위 태그 규칙 : JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸줘야함.
• HTML태그를 최상위 태그로 사용하지 않으려면 렌더링되지않는 <React.Fragment> 또는 <>태그로 감싸줘야함.

4. 조건부 렌더링

 : 리액트 컴포넌트가 조건식의 결과에 따라 각기 다른 값을 페이지에 렌더링하는 것

• 삼항 연산자를 활용한 조건부 렌더링 : 간결하지만 가동성이 떨어짐. 다중 조건을 작성하기 힘듦.

<h2>{num}은(는) { num % 2 === 0 ? "짝수" : "홀수" }입니다.</h2>

• 조건문을 이용한 조건부 렌더링 : 가독성은 좋으나 코드가 많고 중복코드 발생 우려가 있음.
• 조건문은 JS표현식이 아니기 때문에 JSX와 함께 사용할 수 없지만, 조건에 따라 컴포넌트가 반환하는 값을 다르게 표시하도록 만들수 있음.

if(num % 2 ===0) {
	return <div> {num}은(는) 짝수입니다. </div>
} else {
	return <div> {num}은(는) 홀수입니다. </div>
}

5. JSX 스타일링

- 인라인 스타일링 : JSX문법 중 하나. HTML의 style 속성을 이용해 직접 스타일을 정의하는 방법

• style = {{스타일 규칙들}}
• 객체를 생성한 다음 각각의 스타일을 프로퍼티 형식으로 작성.(문자열x)
• 카멜표기법으로 작성(스네이크 케이스 표기법x)

- 스타일 파일 분리 : 별도의 CSS파일을 만들고 불러와 스타일 적용 가능.

• CSS파일은 import문으로 경로만 명시하면 불러올 수 있음.

import './Body.css'

• JSX에서는 요소의 이름을 지정할 때 className을 사용함.(class는 js의 예약어라 사용할 수 없음.)

<div className="body"></div>