[코낭] 2.4 JSX 문법

🥌 2.4.1 감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸야 한다.
• 리액트 컴포넌트에서 요소 여러 개를 왜 하나의 요소로 꼭 감싸 주어야 할까?
  • Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문이다.

    div 대신 Fragment를 사용해도 괜찮다.

import {Fragment} from 'react';

function App() {
	return (
    	<Fragment>
        	<h1></h1>
            <h2></h2>
        </Fragment>
    );
}

export default App;

다른 코드 똑같은 표현으로는 아래와 같이 작성하면 된다.

import {Fragment} from 'react';

function App() {
	return (
    	<>
        	<h1></h1>
            <h2></h2>
        </>
    );
}

export default App;

🥌 2.4.2 자바스크립트 표현

• JSX가 단순히 DOM 요소를 렌더링하는 기능외에도 JSX 안에서는 자바스크립트 표현식을 쓸 수 있다.

ES6의 const와 let

const는 ES6 문법에서 새로 도입되었으며 한번 지정하고 나면 변경이 불가능한 상수를 선언할 때 사용하는 키워드이다. let은 동적인 값을 담을 수 있는 변수를 선언할 때 사용하는 키워드이다.
ES6 이전에는 값을 담는 데 var 키워드를 사용했는데, var 키워드는 scope(해당 값을 사용할 수 있
는 코드 영역)가 함수 단위이다.

function myFunction() {
	var a = "hello";
    if(true) {
    	var a = "bye";
        console.log(a); // bye
    }
    console.log(a); // bye
}
myFunction();

• if 문 바깥에서 var 값을 hello로 선언하고, if 문 내부에서 bye로 설정했다. if 문 내부에서 새로 선언했음에도 if 문 밖에서 a를 조회하면 변경된 값이 나타난다.

function myFunction() {
	let a = 1;
    if(true) {
    	let a = 2;
        console.log(a); // 2
    }
    console.log(a); // 1
}
myFunction();

• let과 const는 scope가 함수 단위가 아닌 블록 단위이므로, if문 내부에서 선언한 a값은 if 문 밖의 a값을 변경하지 않는다.

• let과 const 를 사용할 때 같은 블록 내부에서 중복 선언이 불가능하다.

let a = 1;
let a = 2; // 오류 발생

• const는 한번 선언하면 재설정할 수 없다.

const b = 1;
b = 2; // 오류 발생

• 기본적으로 const를 사용하고, 해당 값을 바꾸어야 할 때는 let을 사용한다.

🥌 2.4.3 If문 대신 조건부 연산자

• JSX내부의 자바스크립트 표현식에서 if문을 사용할 수 없다.
• 조건에 따라 다른 내용을 렌더링해야 할 때 JSX밖에서 if 문을 사용하여 사전에 값을 설정하거나, { } 안에 조건부 연산자(삼항 연산자)를 사용하면 된다.

function App() {
	const name = '리액트';
    return(
    	<div>
        	{name === '리액트' ? (
            	<h1>리액트입니다.</h1>
            ) : (
            	<h2>리액트가 아닙니다.</h2>
            )}
        </div>
    );
}

export default App;

위 코드 실행 시 '리액트입니다.'라는 문구를 볼 수 있다.

const name = '뤼왝트';

위와 같이 코드를 변경하면 '리액트가 아닙니다.'라는 문구가 나타날 것이다.

🥌 2.4.4 AND 연산자(&&)를 사용한 조건부 렌더링

const name = '뤼왝트';
return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div>;

const name = '뤼왝트';
return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>;

• 위 코드 모두 다 실행 시에 브라우저에 아무것도 나타나지 않는다.
• name 값을 리액트로 설정하면 '리액트입니다.'라는 문구가 나타날 것이다.

• && 연산자로 조건부 렌더링을 할 수 있는 이유는 리액트에서 false 렌더링할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문이다.
  ❗ 주의점
• false값이 0일 때 예외적으로 화면에 나타난다.

const number = 0;
return number && <div>내용</div>

위 코드 실행 시 화면에 0을 보여준다.

🥌 2.4.5 undefined를 렌더링하지 않기

• 리액트 컴포넌트에서는 함수에서 undefined만 반환하여 렌더링하는 상황을 만들면 안된다.

const name = undefined;
return name;

위와 같이 작성하면 오류가 발생한다.
아래 코드로 작성하여 오류를 방지할 수 있다.

const name = undefined;
return name || '값이 undefined입니다.';

• JSX 내부에서 undefined를 렌더링하는 것도 괜찮다.

const name = undefined;
return <div>{name}</div>;

name 값이 undefined일 때 보여 주고 싶은 문구가 있다면 아래와 같이 작성하면 된다.

const name = undefined;
return <div>{name || '리액트'}</div>;

🥌 2.4.6 인라인 스타일링

• 리액트에서 DOM 요소에 스타일을 적용할 때 문자열 형태가 아닌 객체 형태로 넣어 주어야 한다.
• 예를 들어 background-color처럼 - 문자가 포함되는 이름은 카멜 표기법을 사용하여 backgroundColor로 작성한다.

🥌 2.4.7 class대신 className

• HTML에서 CSS클래스를 사용할 때

<div class="(클래스명)"></div>

와 같이 class라는 속성을 설정하지만 JSX에서는

<div className="(클래스명)"></div>

와 같이 className으로 설정해 주어야 한다.

• JSX구문에서 class 값을 설정해도 스타일이 적용되기는 하지만 그렇게 사용하면 브라우저 개발자 도구의 console 탭에 className으로 변환해주어야 한다는 오류가 발생한다.