리액트[기초] JSX

JSX를 여러 줄로 작성할 때는 괄호로 감싸고, 한 줄로 표현할 때는 감싸지 않는다 괄호로 감싸는 것이 필수 사항은 아니다 

---

JSX 란?

• 자바스크립트의 확장 문법이다
• XML과 비슷하게 생겼는데 이런 형식으로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

---

JSX 장점 

• 보기 쉽고 익숙하다 
• div, span, HTML 태그를 사용할 수 있을 뿐 아니라 컴포넌트도 JSX안에서 작성할 수 있을 정도로 높은 활용도를 가졌다 

---

JSX 문법 ( 사용하려면 몇 가지 규칙을 준수해야 한다 ) 

1.  컴포넌트에 여러 요소가 있다면 반드시 부모 요소 하나로 감싸주어야 한다

• 부모 요소로 div를 사용하고 싶지 않으면 import 구문에서 react 모듈에 들어있는 Fragment 컴포넌트를 추가해서 Fragment 사용하면 된다 
• Virtual DOM에서 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM 트리구조로 이루어져야 한다는 규칙이 있기 때문에 반드시 부모 요소 하나로 감싸주어야 한다 

// div 사용
function App() {
	return(
    // 요소가 여러개일때는 무조건 부모 요소 하나로 감싸줘야한다 감싸주지 않으면 오류가 발생한다
    <div>
    <h1>안녕</h1>
    <h2>안녕</h2>
    </div>
    );
}
export default App;

// Fragment 사용 1
import { Fragment } from 'react';
function App() {
	return(
    <Fragment>
    <h1>안녕</h1>
    <h2>안녕</h2>
    </Fragment>
    );
}
export default App;

// Fragment 사용 2
import { Fragment } from 'react';
function App() {
	return(
    // Fragment를 지우고 <> 형태로만 표현도 가능하다
    <>
    <h1>안녕</h1>
    <h2>안녕</h2>
    </>
    );
}
export default App;

---

2.  자바스크립트 표현식을 작성하려면 JSX 내부에서 코드를 {}로 감싸야한다

function App() {
	const name ='멜론';
return(
    <>
    <h1>{name}안녕</h1>
    <h2>안녕</h2>
    </>
    );
}
export default App;

---

3.  JSX 내부의 자바스크립트 표현식에서는 if문을 사용할 수 없다 

• 조건에 따라 다른 내용을 렌더링 해야 할 때는 JSX밖에서 if문을 사용하여 사전에 값을 설정하거나 {} 안에 삼항 연산자를 사용하면 된다 

function App() {
	const name ='멜론';
return(
    <div>
    {name === '멜론' ? (
   	<h1>안녕</h1>
    ) : (
    	<h2>안녕</h2>
    )}
    </div>
    );
}
export default App;

---

4.  && 연산자를 사용하면 조건부 렌더링을 할 수 있다 

• 특정 조건을 만족할 때는 내용을 보여주고 만족하지 않을 때는 아예 아무것도 렌더링 하지 않아야 하는 상황 일 때 조건부 연산자를 통해 구현할 수 있다 
• 리액트에서 false를 렌더링 할 때는 null과 마찬가지로 아무것도 나타나지 않기 때문에 &&연산자로 조건부 렌더링을 할 수 있다 
• 주의해야 할 점 null은 아무것도 나타나지 않지만 0은 예외적으로 화면에 나타난다 

// null을 렌더링 하면 아무것도 보여주지 않는다
function App() {
	const name ='멜론';
return <div> {name === '멜론' ? <h1>안녕</h1> : null} </div>;
}
export default App;

// && 사용
function App() {
	const name ='멜론';
return <div> {name === '멜론' && <h1>안녕</h1>} </div>;
}
export default App;

// 0 사용 (이런 코드는 화면에 숫자 0이 나타나게 된다)
function App() {
	const number = 0;
return number && <h1>안녕</h1> 
}
export default App;

---

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

• 어떤 값이 undefined 일 수도 있다면 OR(||) 연산자를 사용해서 해당 값이 undefined 일 때 사용할 값을 지정해준다 
• 리액트 컴포넌트 함수에서는 undefined만 반환해서 렌더링이 안되지만 JSX내부에서는  undefined만 반환해서 렌더링 하는 것이 가능하다( 값이  undefined 일 때 문구를 주고 싶다면 or 연산자 사용) 

// 오류가 발생하는 코드
function App() {
	const name = undefined;
	return name; 
}
export default App;

// or 연산자 사용
function App() {
	const name = undefined;
	return name || '값이 undefined입니다' ;  
}
export default App;

// JSX 내부에서 undefined
function App() {
	const name = undefined;
	return <div>{name}</div>;  
}
export default App;

// JSX 내부에서 undefined
function App() {
	const name = undefined;
    // 해당 값이 undefined 일때 문구를 출력 해주고 싶다면 
	return <div>{name || '리액트'}</div>;  
}
export default App;

---

6.  리액트에서 DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어주어야 한다 (인라인 스타일링)

• 스타일 이름 중에 background-color처럼 - 문자가 포함되어 있는 경우엔 - 를 없애고 backgroundColor처럼 카멜 표기법으로 작성해주어야 한다 

// style 객체를 미리 선언하고 div의 style 값으로 지정 하는 방법
function App() {
	const name = '멜론';
	const style = {
   		backgroundColor:'black',
    	color:'red',
    	padding :16 // 단위를 생략하면 px로 지정 된다
	};
	return <div style={style}>{name}</div>; 
}
export default App;

// 미리 선언 하지 않고 바로 style 값을 지정 하는 방법 
function App() {
	const name = '멜론';
	return (
    <div
    style={{
    	backgroundColor:'black',
    	color:'red',
    	padding :16 // 단위를 생략하면 px로 지정 된다
    }}
    >  
    {name}
    </div>
    );
}
export default App;

---

7.  JSX에서는 CSS클래스를 사용할 때  class 가 아닌 className으로 설정해주어야 한다 

• className 이 아닌 class 값을 설정해도 스타일이 적용되기는 하지만 그렇게 사용하면 브라우저 개발자 도구의 Console에서 경고가 뜨게 된다 
• 이전 버전에서는 오류를 내고 적용이 되지 않았는데 리액트 v16이상부터는 class로 설정해도 변환시켜주고  경고를 띄운다 

function App() {
	const name = '멜론';
    	// class 가 아닌 className 사용
	return <div className="react">{name}</div>;  
}
export default App;

---

8. JSX에서는 태그를 닫지 않으면 오류가 발생한다 

• HTML 코드를 작성할 때는 가끔 태그를 닫지 않은 상태로 코드를 작성하기도 하는데 JSX에서는 꼭 태그를 닫아주어야 한다 
• 태그 사이에 별도의 내용이 들어가지 않는 경우 태그를 선언하면서 동시에 닿을 수 있는 태그를 self-closing태그라고 부른다

// 꼭 태그를 닫아주어야한다
function App() {
	const name = '멜론';
	return (
    <div>
    <div className="react">{name}</div>;  
    <input></input>
    </div>
    );
}
export default App;

// self-closing 태그
function App() {
	const name = '멜론';
	return (
    <div>
    <div className="react">{name}</div>;  
    <input/>
    </div>
    );
}
export default App;

---

9.  JSX 내부에서 주석을 작성할 때는 {/*  */}와 같은 형식으로 작성해야 한다 

• 여러 줄로 작성할 수도 있는데 시작 태그를 여러 줄로 작성할 때는 그 내부에서 // 과 같은 형태의 주석도 작성할 수 있다 
• 만약 일반 자바스크립트에서 주석을 작성할 때처럼 아무 데나 주석을 작성하면 그 주석은 화면에 고스란히 나타나게 된다 

function App() {
	const name = '멜론';
	return (
    <div>
    {/* 제대로 된 주석 작성 */}
    <div 
    	className="react" // 시작 태그를 여러줄로 작성하게 된다면 여기에도 주석을 작성할 수 있다
    >
    	{name}
    </div>
    // 이런 주석은 화면에 그대로 나타나게 된다
    /* 이런 주석은 화면에 그대로 나타나게 된다 */
    <input/>
    </div>
    );
}
export default App;