[리액트를다루는기술] JSX란?

• 보기 쉽고 익숙하다 : HTML코드를 작성하는 것과 비슷

• 높은 활용도 : app.js에서 root.rendet함수에 jsx 코드를 인자로 넣어 보여주고 싶은 컴포넌트 화면을 보여줄 수 있음.

app.js에서 React.StrictMode 컴포넌트는 리액트 프로젝트에서 앞으로 사라질 레거시 기능을 사용할 때 경고를 주고, 앞으로 미래의 리액트 버전에 도입될 기능들이 정상적으로 호환될 수 있도록 유도하는 개발환경에서만 활성화되는 디버깅용 컴포넌트.

//Fragment 기본 표현 방식
return(
	<Fragment>
		<h1></h1>
		<h2></h2>
	<Fragment>
);
//Fragment 약식 표현 방식

return(

<>

<h1></h1>

<h2></h2>

</>

);

react 모듈에 들어 있는 Fragment라는 컴포넌트를 추가로 불러옴.

function App(){
	const name = '리액트';
	return (
		<>
			<h1>{name} 안녕!</h1>
			<h2>잘 작동하니?</h2>
		</>
	);
}
export default App;

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

jsx 내부의 자바스크립트 표현식에서 if문을 사용 불가. 이를 대신하여 삼항연산자(조건부연산자) 사용.

return <div>{name === '리액트' ? <h1>리액트입니다.</h1> : null}</div
-> return <div>{name === '리액트' && <h1>리액트입니다.</h1>}</div>&

null을 랜더링하면 아무 것도 보여주지 않으며, 리액트에서 false 랜더링 할때는 아무것도 null과 마찬가지로 아무 것도 보여주지 않기에 &&연산자로 조건부 랜더링이 가능한 것.

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

이때 falsy(?)한 값인 0은 예외적으로 화면에 나타남.

jsx에서 한줄로 표현할 수 있는 경우 괄호로 감싸지 않아도 됨. jsx를 괄호로 감싸는 것은 필수 사항이 아님.

function App(){
	const name = undefined;
	return name; 
}
//에러 발생

어떤 값이 undefined일 수 있다면 or(||)연산자를 사용하여 오류 방지.

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

jsx 내부에서 undefined를 랜더링하는 방법도 있음.

function App(){
	const name = undefined;
	return <div>{name}</div>;
}

값이 undefined일 경우 보여 주고 싶은 문고 지정 가능.

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

//객체를 미리선언 했을때
const style ={
		backgroundColor:'red',
		width: 16//단위 생략시 px로 지정
}
//미리 선언하지 않고 바로 지정할때

return(

<div style={{

backgroundColor:'red',

width: 16//단위 생략시 px로 지정

}}>

</div>

)