[React] JSX

JSX란?

 

리액트에서 컴포넌트는 자바스크립트 함수로 만드는데, 특이하게도 이 함수는 HTML 값을 반환한다. 자바스크립트와 HTML 태그를 섞어 사용하는 문법을 JSX(자바스크립트 XML)라고 한다. JSX는 자바스크립트의 확장 문법이다. JSX는 공식 자바스크립트 문법은 아니지만 대다수 리액트 개발자가 사용하는 문법이다. 

 

🌏 [JSX와 자바스크립트 표현식]

 

function Body () {
	const numA = 1;
    const numB = 2;
    
    const strA = "안녕";
    const strB = "여러분";
    
    const boolA = true;
    const boolB = false;
    
    return (
    	<div>
        	<h1>Body</h1>
            <h2>{numA + numB}</h2>
            <h2>{strA + strB}</h2>
            <h2>{String(boolA || boolB)}</h2>
        </div>
    );
}
export default Body;

 

JSX 문법을 이용하면 HTML 태그에서 자바스크립트의 표현식을 직접 사용할 수 있다. 변수를 넣을 땐 중괄호를 사용하는데 이를 데이터 바인딩이라고 한다. 서버에서 가져온 실제 데이터를 변수에 보관해서 사용한다. 프론트엔드가 주로 하는 일이 서버에서 데이터를 가져와 데이터 바인딩을 하는 것이다.

 

• 산술 표현식
• 문자열 표현식
• 논리 표현식 : 불리언 값은 페이지에 렌더링되지 않는다. 페이지에 렌더링하고 싶다면, 형 변환 함수를 이용해 문자열로 바꿔줘야 한다.
  • {String(boolA || boolB)}
• 사용할 수 없는 값 : 원시 자료형에 해당하는 숫자, 문자열, 불리언, null, undefined를 제외한 값을 사용하면 오류가 발생한다. 객체 자료형은 사용할 수 없다.
  • 만약 객체 자료형의 값을 페이지에 렌더링하고 싶다면, 프로퍼티 접근 표기법으로 값을 원시 자료형으로 바꿔 줘야 한다.

 

function Body () {
	const obj = {
    	a: 1;
        b: 2;
    }
    
    return (
    	<div>
            <h1>Body</h1>
            <h2>a: {obj.a}</h2>
            <h2>b: {obj.b}</h2>
        </div>
    );
}
export default Body;

 

 

🌏 [JSX 문법에서 지켜야 할 것들]

 

1. 닫힘 규칙 : 여는 태그가 있으면 반드시 닫힘 태그도 있어야 한다.
2. 최상위 태그 규칙 : JSX가 반환하는 모든 태그는 반드시 최상위 태그로 감싸야 한다.
   • return 이후에는 한 개의 태그로 둘러싸여 있어야 한다.
   • HTML 태그를 최상위 태그로 사용하지 않으려면 <React.Fragment></React.Fragment> , <></> 사용
   •  <React.Fragment>는 react 라이브러리에서 import 해줘야 한다.
3. 셀프 클로징 태그 : <img />, <input />
4. 조건부 렌더링
   • 삼항 연산자 : 간결, 자주 사용 시 가독성 해침, 다중 조건 작성하기 힘듦
   • 조건문 : 가독성은 좋으나 중복 코드 발생할 우려 있음

 

 

🌏 [JSX 스타일링]

 

function Body () {
    return (
    	<div style={{ backgroundColor: "grey", color: "blue" }}>
            <h1>Body</h1>
        </div>
    );
}
export default Body;

 

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

 

 

• 인라인 스타일링 : HTML의 style 속성을 이용해 직접 스타일 정의
  • style={{ 스타일명: "값"}}
  • 카멜 표기법 : backgroundColor

 

• 스타일 분리 : 요소 이름을 지정할 때 className 사용
  • 스타일 규칙을 적용할 파일 Body.css를 폴더에 만들고 css 작성
  • 컴포넌트에 적용하기 위해 import 문으로 불러온다.