🔎 드디어 중요하고 듣던 React
학습이 시작되었다. 오늘은 React
에서 사용하는 JSX
란 무엇이며, 꼭 알아야 하는 문법에 대해 정리하며 복습해보고자 한다.
→
JSX
는React
에서 UI를 구성할 때 사용하는 문법으로,JavaScript
를 확장한 문법이다.이 문법을 이용해서 React 엘리먼트를 만들 수 있는 것이다.
"그럼 왜 React 요소를 JSX를 이용해서 만드는 것일까?"
→ JSX를 이용하면 명시적으로 코드를 작성 할 수 있기 때문이다.
JavaScript
문법과HTML
문법을 동시에 이용해 기능과 구조를 한눈에 확인할 수 있다.
- 여러 엘리먼트를 작성하고자 하는 경우,
최상위에서 opening tag와 closing tag로 감싸주어야 한다.
→ return() 안에는 병렬로 태그 2개 이상 기입 금지<div> <div> <h1>Hello</h1> </div> <div> <h1>World</h1> </div> </div>
- class 넣을 땐, className 으로!
CSS class 속성을 지정하려면 "className"으로 표기해야 한다.<div className = "greeting">Hello!</div>
- 변수를 넣을 땐(데이터 바인딩), {중괄호}
JSX에서 JavaScript를 쓰고자 한다면, 꼭 중괄호를 이용해야 한다.function App(){ let name = 'fejigu'; return ( <div> Hello,{name} </div> ); }
- React 엘리먼트는 대문자로 시작
이것을사용자 정의 컴포넌트
라고 부른다.function Hello(){ return <div>Hello!</div> } function HelloWorld(){ return <Hello /> }
- 조건부 렌더링은 if문 사용 불가능
삼항 연사자를 이용해야 한다.<div> { (1+1 === 2) ? (<p>정답</p>) : (<p>탈락<p>) } </div>
- 여러 개의 엘리먼트를 표시할 때는,
"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> )
- style 넣을 땐,
style = { {스타일명 : '값'} }return ( <div className="App"> <h4 style={{ color : black }}>BLOG</h4> </div> )