JSX 문법
표현식(Expression)
표현식은 {}로 감싸서 나타내면 됩니다. 대부분의 javascript 표현식은 모두 구현이 가능합니다.
const name = "홍길동";
const nameDetail = {
firstName: "홍",
lastName: "길동",
};
const element = <h1>성은 {nameDetail.firstName}이요,
이름은 {nameDetail.lastName}, 전체 이름은 {name}</h1>;
ReactDOM.render(element, document.getElementById("root"));Function Component
const title = "기능 컴포넌트화하기";
function Desc() {
return (
<h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>
);
}
const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>;
const Footer = () => {return <p> Footer 영역입니다.</p>;};
// 함수형 컴포넌트
function App() {
return (
<>
<h1>{title}</h1>
<Desc></Desc>
<Body />
<Footer />
</>
);
}
ReactDOM.render(<App />, document.getElementById("root"));Class Component
const title = "기능 컴포넌트화하기";
function Desc() {
return (
<h2>Function 형태로 컴포넌트화할 수 있습니다.</h2>
);
}
const Body = () => <p> 본문 내용이 나오는 영역입니다. </p>;
const Footer = () => {return <p> Footer 영역입니다.</p>;};
// 클래스 형 컴포넌트
class App extends React.Component {
render() {
return (
<>
<h1>{title}</h1>
<Desc></Desc>
<Body />
<Footer />
</>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));Props 사용하기
Props를 이용하여 컴포넌트에 값을 넘길 수 있다.
<Body>에서 title 과 desc의 속성을 넘기면 Body컴포넌트가 props로 받아서 사용할 수 있음
const Body = (props) => {
return
<>
<p> 제목 : {props.title}</p>;
<p> 내용 : {props.desc}</p>;
</>
};
function App() {
return (
<Body title="제목입니다." desc="설명입니다." />
);
}
구조 분해 할당 (튜플 분해)
props를 넘길 때 구조를 분해해서 할당할 수도 있다.
받는 쪽에서 아예 { title, desc }으로 받아서 굳이 props를 작성할 필요 없이 바로 받아서 사용할 수 있다.
const Body = ({ title, desc }) => {
return
<>
<p> 제목 : {title}</p>;
<p> 내용 : {desc}</p>;
</>
};
function App() {
return (
<>
<Body title="제목입니다." desc="설명입니다." />
</>
);
}조건(3항) 연산자 사용하기
jsx의 표현식을 활용할 때 if 문은 사용할 수 없고 대신에 3항 연산자로 사용
// 일반 if 문.
if (yn === true) {
return <Body title="제목입니다." desc="설명입니다." />;
} else {
return <Body title="없습니다." desc="아닙니다." />;
}
// 3항 연산자
{
yn === true ? <Body title="제목입니다." desc="설명입니다." /> : <Body title="없습니다." desc="아닙니다." />;
}
// AND 연산자 : true 면 실행, false 면 아무것도 없음.
{
yn === true && <Body title="제목입니다." desc="설명입니다." />;
}JSX 사용 시 주의사항
하나의 부모 요소
컴포넌트는 하나의 요소로만 감싸져야 함
만약 아래와 같이 하나 이상의 요소가 있으면 에러 발생
// 이렇게 묶어주는 하나의 부모 태그가 없으면 오류가 발생함
function App() {
return (
<h1>{title}</h1>
<Desc></Desc>
<Body />
);
}
// 아래와 같이 가상의 태그로라도 하나로 묶어주어야 정상임
function App() {
return (
<>
<h1>{title}</h1>
<Desc></Desc>
<Body />
</>
);
}class는 className로
jsx에서 태그의 attribute 이름으로 class를 작성할 때는 className으로 작성
- 왜냐하면 javascript에 기본적으로 class가 있기 때문에 혼돈을 없애고자
className으로 사용
function App() {
return (
<>
<h1 class="abc">{title}</h1> <--// X 오류 발생
<h1 className="abc">{title}</h1> <--// O 정상 작성
<Desc />
<Body />
</>
);
}HTML attribute 이름 대신 camelCase 프로퍼티 명명 규칙
jsx에서 style를 작성할 때로 "-"가 아니라
camelCase를 사용
function App() {
const style = {
font-size: '20px' // X 오류 발생
fontSize: '12px' // O 정상 작동
}
return (
<>
<h1 className="abc" style={style} >{title}</h1>
<Desc />
<Body />
</>
);
}react를 받았을 때 App.js 안의 render 함수 안에 return 안 html로 생긴 이것이 바로 JSX 코드이다.
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h1 className="App-title">Welcome to React</h1>
</header>
<p className="App-intro">
To get started, edit <code>src/App.js</code> and save to reload.
</p>
</div>JSX 코드는 리액트 컴포넌트를 만들때 사용하는 언어이다.
.js로 파일을 생성하면, render() 에서 태그가 자동완성 되지 않아 고생이 많았다.
알고봤더니, React에서는 .jsx로 작성해야한다.
이렇게 하면, HTML 자동 완성됨.
리액트에서 빌드시 고쳐준다고 한다.
There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of resolving what type of file contents there is.
There are however some other considerations when deciding what to put into a .js or a .jsx file type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain" JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.
