[React] JSX - 정의, 꼭 알아야 하는 문법

fejigu·2022년 7월 30일
1

React

목록 보기
1/16


🔎 드디어 중요하고 듣던 React 학습이 시작되었다. 오늘은 React에서 사용하는 JSX란 무엇이며, 꼭 알아야 하는 문법에 대해 정리하며 복습해보고자 한다.



✔️ JSX란

JSXReact에서 UI를 구성할 때 사용하는 문법으로, JavaScript를 확장한 문법이다.이 문법을 이용해서 React 엘리먼트를 만들 수 있는 것이다.

"그럼 왜 React 요소를 JSX를 이용해서 만드는 것일까?"
JSX를 이용하면 명시적으로 코드를 작성 할 수 있기 때문이다.
JavaScript 문법과 HTML 문법을 동시에 이용해 기능구조를 한눈에 확인할 수 있다.




✔️ JSX, 꼭 알아야 하는 문법

  1. 여러 엘리먼트를 작성하고자 하는 경우,
    최상위에서 opening tag와 closing tag로 감싸주어야 한다.
    return() 안에는 병렬로 태그 2개 이상 기입 금지
<div>
  <div>
    <h1>Hello</h1>
  </div>
  <div>
    <h1>World</h1>
  </div>
</div>
  1. class 넣을 땐, className 으로!
    CSS class 속성을 지정하려면 "className"으로 표기해야 한다.
    <div className = "greeting">Hello!</div>
  1. 변수를 넣을 땐(데이터 바인딩), {중괄호}
    JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.
function App(){
	let name = 'fejigu';
return (
	<div>
	Hello,{name}
	</div>
);
}
  1. React 엘리먼트는 대문자로 시작
    이것을 사용자 정의 컴포넌트라고 부른다.
function Hello(){
	return <div>Hello!</div>
}
function HelloWorld(){
	return <Hello />
}
  1. 조건부 렌더링은 if문 사용 불가능
    삼항 연사자를 이용해야 한다.
<div>
{
	(1+1 === 2) ? (<p>정답</p>) : (<p>탈락<p>)
}
</div>
  1. 여러 개의 엘리먼트를 표시할 때는,
    "map()" 함수를 사용하기
    map 함수를 사용할 때는 반드시 "key" JSX 속성을 넣어야 한다.
function Blog() {
	const content = posts.map((post) =>
        <div key={post.id}>
        <h3>{post.title}</h3>
        <h3>{post.content}</h3>
        </div>                        
};
return(
	<div>
      {content}
    </div>
)
  1. style 넣을 땐,
    style = { {스타일명 : '값'} }
return (
	<div className="App">
    <h4 style={{ color : black }}>BLOG</h4>
    </div>
)
profile
신규 서비스의 기획부터 개발, 운영까지 전 과정을 경험한 주니어 📱

0개의 댓글