💚 리액트(React)
FaceBook 에서 제공하는 프론트엔드 라이브러리
사용자 인터페이스를 만들기 위한 Javscript 라이브러리
💛 리액트 특징
리액트(React)는 컴포넌트 기반 라이브러리로 재사용에 용이해요. 이런 점 때문에 리액트(React)를 사용하면 사용자 인터페이스를 좀 더 빠르고 효율적으로 구축할 수 있어요!
또한, 리액트(React)는 virtual DOM을 만들어 새롭게 변경된 부분만 DOM에 반영하는데요. 이로 인해 앱에 속도와 효율성을 높일 수 있다는 장점이 있습니다.
✔ virtual DOM은 가상의 DOM을 의미해요!
실제로 보여지는 DOM이 아니며, 실제 DOM을 보여주는 것보다 속도가 훨씬 빠르다고 합니다.
💚 JSX
자바스크립트 확장 구문
React에 요소를 제공해주는 역할
아래 코드를 보면, HTML과 같은 코드가 존재하는데요. 리액트(React)에서는 HTML이 아닌 JSX를 사용합니다.
JSX를 사용하면 아래와 같이 HTML, XML과 유사한 태그를 만들고 사용할 수 있어요!
ReactDOM.render(
<h1>Hello React!</h1>,
document.getElementById('root')
);JSX를 사용할 때 여러개의 컴포넌트들이 존재한다면, 반드시 부모요소로 감싸주어야 합니다.
function App() {
return (
<div className="App">
<h1>안녕하세요!</h1>
<h2>송우든입니다.</h2>
</div>
);
}부모요소로 감싸주지 않는다면, 아래와 같은 오류를 만날 수 있으니 유의해서 사용해주세요!
SyntaxError
/src/App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment또한, JSX에서는 자바스크립트 표현식을 사용할 수 있는데요! JSX 내부에 {}중괄호로 감싸서 사용합니다.
function App() {
const user = {
name : "송우든",
age : 25};
return (
<div>
<h1>안녕하세요!</h1>
<h2>{user.name}, {user.age}살입니다</h2>
</div>
);
}
// 안녕하세요!
// 송우든, 25살입니다마지막으로 JSX를 사용할 때 주의해야 할 점에 대해 정리해보려고 합니다.
💛 JSX 내부에서 조건 연산이 필요한 경우 삼항연산자를 사용하기
JSX 내부에 자바스크립트 표현식을 사용할 때 if문을 사용할 수 없는데요!
아래코드와 같이 삼항연산자를 사용하거나 JSX밖에서 값을 처리해서 사용합니다.
function App() {
const user = {
name : "송우든",
age : 25};
return (
<div>
{(user.name === "송우든") && (user.age === 25) ?
(<h1> 등록된 사용자입니다.</h1>) : (<h1> 미등록 사용자입니다.</h1>)
}
</div>
);
}
// 등록된 사용자입니다.💛 태그 닫아주기
태그가 비어 있다면, self-closing태그를 사용하거나ㅣ </>를 통해 꼭 태그를 닫아주어야 해요!
<br> // error
<br/> // okay - self-closing
//error message
SyntaxError
/src/App.js: Unterminated JSX contents💛 JSX 속성 정의시 camelCase표기법 사용하기
JSX는 자바스크립트에 좀 더 가깝기 때문에, HTML Attribute이름 대신에 cameCase 프로퍼티 명명 규칙을 사용합니다.
리액트와 JSX에 대해 간단히 정리해보았는데요. 다음 포스팅부터는 리액트를 제대로 다루어볼게요!
참고 자료 및 사이트
