Notice
Recent Posts
Link
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
Tags
- JS form
- JS 형변환
- JS classList
- JS value속성
- JS prompt
- JS 연산
- JS 스코프
- JS localStorage
- git 협업셋팅
- JS 화살표함수
- HTML기초
- JS 삼항연산
- JS null undefined
- CSS속성정리
- JS redirection
- JS append
- JS typeof연산자
- JS 기초
- JS 함수
- js 변수
- JS clearInterval
- JS 숫자
- CSS기초
- JS preventDefault
- JS 타이머기능
- JS 데이터타입
- JS setTimeout
- JS form action
- JS appendChild
- JS setInterval
Archives
공부기록용
React입문 1주차(JSX) 본문
JSX란
JavaScript를 확장한 문법으로 JavaScript의 모든 기능이 포함되어 있으며, React Element를 생성하기 위한 문법이다.
기본적으로 return문 안에 존재하며 JSX 문법을 사용해서 React 요소를 만들고 DOM에 렌더링 시켜서 그린다.
(-> 우리가 실질적으로 코드를 작성하는 App.js를 index.js에서 createRoot를 한 다음에 render한다. 만들어 놓은 App.js를 React에서 render를 하면서 화면에 그려나가는 것이다._render하면서 DOM에 렌더링을 시키는 것이다.)
HTML을 품은 JS ⇒ JSX
아래 같은 HTML 태그는 .js 파일 안에서 쓸 수 없다.
<div> <h1>안녕하세요!</h1> <p>시작이 반이다!</p> </div>
▼
자바스크립트 안에서 html 태그같은 마크업을 넣어 뷰(UI) 작업을 한다.const start_half = <div> <h1>안녕하세요!</h1> <p>시작이 반이다!</p> </div>;
JSX에서 쓰는 <div>~~</div>는 DOM 요소가 아닌 정확히는 React 요소이다.
리액트 돔을 구성하는 건 리액트 요소! 돔을 구성하는 건 돔 요소이다
react snipet
// rfc import React from 'react' export default function App() { return ( <div>App</div> ) }
// rfce import React from 'react' function App() { return ( <div>App</div> ) } export default App
import React from 'react'
export default function App() {
const a = 7;
const b = 10;
return (
<div>
<input type="text"/>
<div>안녕하세요 {a+b}입니다.</div>
</div>
)
}
삼항연산자 사용해보기
import React from 'react'
export default function App() {
const number = 1;
return (
<div>
<p>안녕하세요 리엑트입니다.</p>
{/* 주석을 사용하는 방법 */}
{/* 삼항연산자를 사용해 볼게요 */}
<p>{
number > 10 ? // number이 10보다 크다는 조건이
number + '은 10보다 크다' // 참일 경우
: number + '은 10보다 작다' // 거짓인 경우
}
</p>
</div>
)
}
class 지정과 style속성 지정해보기
class가 아닌 className로 지정 하는거 기억하기
{ }안에 js 속성을 넣을 수 있고 객체{ }로 넣어줘야해서 이중인 점 기억하기
import React from 'react'
export default function App() {
const number = 1;
return (
// <div class = "test-class"> 이렇게 class를 지정하고 싶을때 class가 아닌 className로 지정해야함
<div className="test-class">
<p>안녕하세요 리엑트입니다.</p>
{/* 주석을 사용하는 방법 */}
{/* 삼항연산자를 사용해 볼게요 */}
<p style={{
color: "red",
}}>
{
number > 10 ? // number이 10보다 크다는 조건이
number + '은 10보다 크다' // 참일 경우
: number + '은 10보다 작다' // 거짓인 경우
}
</p>
</div>
)
}
style속성 변수로 지정해서 적용해주기(변수로 지정해줌으로써 재사용이 가능해진다.)
import React from 'react'
export default function App() {
const number = 1;
const pTagStyle = {
color: "red",
}
return (
// <div class = "test-class"> 이렇게 class를 지정하고 싶을때 class가 아닌 className로 지정해야함
<div className="test-class">
<p>안녕하세요 리엑트입니다.</p>
{/* 주석을 사용하는 방법 */}
{/* 삼항연산자를 사용해 볼게요 */}
<p style={pTagStyle}>
{
number > 10 ? // number이 10보다 크다는 조건이
number + '은 10보다 크다' // 참일 경우
: number + '은 10보다 작다' // 거짓인 경우
}
</p>
</div>
)
}
'📚강의록📚 > 스파르타)React' 카테고리의 다른 글
React입문 1주차(Props 추출) (0) | 2023.06.24 |
---|---|
React입문 1주차(Props Children) (0) | 2023.06.24 |
React입문 1주차(Props) (0) | 2023.06.24 |
React입문 1주차(React Component) (0) | 2023.06.24 |
React입문 1주차(초기셋팅) (0) | 2023.06.23 |
Comments