html, css, javascript가 각각의 문법이 있듯이 react도 리액트만의 문법인 JSX문법을 사용합니다.
React 공식문서를 확인하면서 함께 공부를 하는 것을 권장드립니다.
JSX문법을 사용한 경우
return {
<div
onClick= {() => setFollowing(!following)}
style={ following ? followingBtnStyle : followBtnStyle }
>
{following ? "following" : "Follow"}
</div>
}
JSX문법을 사용하지 않은 경우
return React.createElement("div",
{
onClick: () => setFollowing(!following),
style: following ? followingBtnStyle : followBtnStyle
},
following ? "following" : "Follow");
}
현재 div태그를 하나 만들고 있음에도 JSX문법을 사용한 경우가 훨씬 가독성이 높은 것을 확인할 수 있습니다. 따라서 대부분은 JSX문법을 사용해 작성을 하게 됩니다.
또한 이렇게 작성된 JSX문법은 babel을 통해 자바스크립트로 변환해줍니다.
JSX란?
JSX안에서 표현식을 사용하려면 {}로 감싸주어야합니다.
function App() {
const message = "Learn React"
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
Yahoo !!!!
</p>
<a
className="App-link"
href="<https://reactjs.org>"
target="_blank"
rel="noopener noreferrer"
>
{message} //이부분 체크
</a>
</header>
</div>
또한 함수 역시 표현식이기 때문에 함수를 사용할 수 있습니다.
function App() {
const getGreetingMessage = (name) => {
return `Hello, ${name}! Learn React`
}
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
Yahoo !!!!
</p>
<a
className="App-link"
href="<https://reactjs.org>"
target="_blank"
rel="noopener noreferrer"
>
{getGreetingMessage("0seo8")}
</a>
</header>
</div>
);
}