[React] 자바스크립트 확장 문법 'JSX'에 대해

손규성·2022년 11월 13일
0

react

목록 보기
1/2
post-thumbnail

🌱JSX 요약


const element = <h1>Hello JSX</h1>;
  • JSX는 React에서 HTML을 표현할 때 사용되는 JavaScript 확장 문법이다.
  • HTML 문법을 JavaScript와 혼용해서 사용해 React Element를 생성할 수 있다.
  • HTML 리터럴 같지만 실제 빌드시에는 Babel이라는 compiler를 통해 일반 JavaScript로 변환된다.
  • 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다.
  • React에서 코드를 JSX 문법으로 작성하는 것은 필수는 아니지만, JS 코드 안에서 UI관련 작업을 할 수 있기 때문에 코드의 가독성을 높일 수 있다. 또한 JSX 문법에 의거해 코드를 작성하면 React가 더욱 도움이 되는 에러 및 경고 메시지를 표시해준다.

JSX 사용하기


💡1. 부모 요소 필수

// Eg 1. 잘못된 코드 ❌
function Example() {
	return (
    	<h1>Hello World!</<h1>
        <p>Welcome to my blog</p>
  	);
}

          
// Eg 2. 올바른 코드 🔥
function Example() {
	return (
     	<div>
            <h1>Hello World!</<h1>
            <p>Welcome to my blog</p>
		</div>
  	);
}     
  • JSX 문법을 사용할 때 렌더링될 루트 요소는 딱 하나만 존재해야 한다. 즉 여러 Component를 다뤄야할 때는 하나의 부모 요소로 감싸줘야 한다.
  • Virtual DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙이 있기 때문이다.
  • 예제를 보면 알 수 있듯이 <h1> 태그와<p> 태그를 한 묶음으로 생성할 때 하나의 루트 요소로 묶어주지 않으면 React가 친절하게 Failed to Compile 에러를 뱉어준다.
  • 이를 방지하기 위해 두 번째 코드처럼 하나의 <div> 요소로 모든 걸 감싸주면 된다.

💡2. <fragment>

// Eg 3. Fragment 
function Example() {
	return (
     	<fragment>
            <h1>Hello World!</<h1>
            <p>Welcome to my blog</p>
		</fragment>
  	);
}
             
              
// Eg 4. Empty Fragment
function Example() {
	return (
     	<>
            <h1>Hello World!</<h1>
            <p>Welcome to my blog</p>
		</>
  	);
}
  • 불필요한 <div> 사용을 피하고 싶거나 스타일 관련 코드가 복잡해지는 것을 방지하기 위해 <fragment>를 사용하면 된다. DOM에 별도의 노드를 추가하지 않고 여러자식을 그룹화 할 수 있다. (JSX 사용시 하나의 루트 요소만 반환해야 하는데, fragment는 일종의 투명 부모 요소 역할을 해준다)
  • Fragment 태그 대신 빈 태그<> </>를 사용해도 똑같은 효과를 볼 수 있다.

💡3. JS 표현식

// Eg 5. JavaScript 표현식 사용 
function Welcome() {
	const name = 'James';
  
  	return (
		<h1>Welcome to my blog!</h1>
      	<p>{name}</p>
    );
}
  • JSX 안에서 JavaScript 표현식을 사용할 수 있다. 변수/상수 값을 사용해서 표시하기 위해서는 { } 안에 코드를 작성하면 된다.
  • 예제의 경우 <p> 태그 안에서 name을 중괄호로 감싸서 사용했기 때문에 James라는 값에 접근할 수 있게 된다.

💡4. 조건부 렌더링

// Eg 6. 외부에서 if문 사용 
function Example() {
	let intro = '';
	let login = 'Y';
	
 	if(login === 'N') intro = <p>비회원 유저입니다.</p>;
	else intro = <p>회원가입 완료한 유저입니다.</p>;
  
	return (
		<>
			{intro}
		</>
	);
}

// Eg 7. 내부에서 삼항연산자 사용
function Example() {
	let intro = '';
	let login = 'Y';

	return (
		<>
			{login === 'Y'
                ? (<p>회원가입 완료한 유저입니다.</p>)
                : (<p>비회원 유저입니다.</p>)
        	}
		</>
	);
}

// Eg 8. &&, || 연산자 사용
function Example() {
	let intro = '';
	let login = 'Y';

	return (
		<>
        	{loginYn === 'Y' && <div>회원가입 완료한 유저입니다.</div>}
		</>
	);
}
  • if문은 JSX 내부 JavaScript 표현식에서는 사용할 수 없다. 때문에 JSX 내부에서 조건부 렌더링을 하기 위해서는 삼항연산자, AND연산자, OR연산자를 통해 조건부 렌더링을 할 수 있다.
  • 혹은 예제 첫 번째 코드처럼 JSX 외부에서 if문을 사용할 수도 있다.
  • 주의해야할 점은 React에서는 undefinednull값은 에러를 발생시킨다. 따라서 OR연산자는 특정 값이 undefined이거나 null일 때 렌더링하고자 하는 내용이 있을 때 주로 사용된다.

💡5. className

function Example() {
	return (
    	<>
        	<div className="user-name">James</div>
        </>
    );
}
  • HTML 문법에서는 각 요소에 클래스를 부여할 때 class라고 작성한다.
  • 하지만 일반 JavaScript 문법에 class는 특정 요소의 클래스 명이 아니라 class를 생성할 때 사용되는 문법이기 때문에 컴파일러의 오류를 초래할 수 있다. 때문에 JSX 에서는 특정 요소에 클래스를 부여하기 위해 class 대신 className이라고 작성해야 한다.

💡6. 스타일링은 camelCase

function Example() {
	const style = {
		backgroundColor: '#fff',
		fontSize: '24px'
	}
    
	return (
		<div style={style}>Welcome to my blog!</div>
	);
}
  • 스타일링 요소를 작성할 때 일반 CSS 에서는 font-size 처럼 두 단어 중간에 -를 써서 작성한다.
  • 하지만 JavaScript에서 - 는 dash의 역할이 아닌, 빼기 연산자를 뜻하기 때문에 JSX 에서 font-size라고 입력하는 경우 font 빼기 size로 인식하게 된다.
  • 이를 방지하기 위해 font-size처럼 두 개 이상의 단어를 합친 스타일링 요소는 fontSize처럼 camelCase를 사용해서 작성해야 한다.

마무리


  • Vanilla JS로 개발할 때는 querySelector, classList.add, appendChild 같은 여러 메서드를 util 함수로 묶어 놓고 사용하는 경우가 많았다.
  • React와 JSX는 그 과정을 생략할 수 있게 해줄 뿐 아니라 가독성 좋은 코드를 작성할 수 있게 해준다는 점에서 너무 흥미롭게 느껴진다.
  • JSX의 기초를 이해하는 것이 JavaScript가 익숙하다면 어렵게 느껴지진 않지만, HTML과 JavaScript과 혼용된 문법에 처음엔 낯설게 느껴질 수 있다.
  • React에서 왜 JSX를 사용하는지와 둘의 관계를 중점으로 여러 영상/자료를 찾아보면 이해력 향상에 훨씬 도움 되는 것 같다. 앞으로는 더 빠르게, 재밌는 것들을 많이 개발해볼 수 있을 것 같다.

References:

1. 갓대희의 작은 공간 블로그 - 2. JSX란? (정의, 장점, 문법)
2. 코딩애플 - React 기초 2강 : 리액트에선 HTML대신 JSX 써야함 (JSX 사용법)

profile
블로그 이사 → https://sqsung.tistory.com/

0개의 댓글