티스토리 뷰
728x90
React의 컴포넌트를 만드는데 사용하는 문법
let test = "테스트";
return (
<div className="app">
<h2>{text}</h2>
<h2>{1 + 2}</h2>
<b>{number % 2 === 0 ? "짝수" : "홀수"}</b>
</div>
);
위 코드와 같이 { } 를 이용해 변수나 데이터를 넣을 수 있음.
{func()} 처럼 함수를 호출할 수도 있으나 숫자나 문자열 처럼 화면에 표시할 수 있는 데이터 타입을 return
해주면 화면에 해당 값을 뿌려주지만 그렇지 않은 경우 화면에는 아무것도 나타나지 않는다.
닫힘 규칙
- 여는 태그가 있으면 반드시 닫는 태그도 있어야한다
최상위 태그 규칙
- 취상위 태그 : 컴포넌트 최상위에 위치한 태그
- JSX로 컴포넌트를 만드려면 반드시 최상위 태그로 다른 태그들을 묶어줘야한다
- 최상위 태그로 묶고 싶지 않다면 react fragment로 대체할 수 있음
- <React.Fragment></React.Fragment>
- 이를 위해서는 import React from "react"; 임포트 구문이 필요함
- <React.Fragment></React.Fragment>
728x90
'헉!! > ETC' 카테고리의 다른 글
[React] Props (0) | 2024.07.21 |
---|---|
[React] CSS (0) | 2024.07.21 |
[Electron] 시작하기 (0) | 2024.07.20 |
Selenium에서 Playwright로 전환해보니.. (0) | 2024.07.20 |
Amazon Linux 2023 서버 타임존을 서울로 변경 (0) | 2024.06.16 |
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
TAG
- Spring
- 아이폰 어플리케이션
- Programming
- 자바
- Spring Framework
- iPhone
- MacOS X
- Objective-C
- JSP
- Xcode
- SQL
- MySQL
- 제이쿼리
- JavaScript
- 아이폰 개발
- MAC OSX 10.7
- 오브젝티브 C
- tomcat
- oracle
- IT
- 아이폰
- Object C
- 자바스크립트
- iOS 개발
- Objective C
- iBATIS
- 오브젝트 C
- jQuery
- zero
- Java
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함