유용한 JSX 문법 알아보기
유용한 JSX 문법 알아보기
JSX문법은 {}
중괄호 안에 유효한 모든 Javascript 표현식을 넣을 수 있다.
표현식(expression) : 값을 산출하는 구문
{}
중괄호 안에 유효한 모든 Javascript 표현식을 넣을 수 있다.구문이란?
- 프로그램을 구성하는 기본 단위
- 즉, 구문이란 리터럴을 사용해 표현식을 작성하고 값을 처리하기도 하는 명령문
값 : 표현식의 결과
1
10 + 10
표현식
// 숫자 표현식
10;
10 + 20;
//문자 표현식
("hello");
"hello" + "world";
//논리 표현식
30 > 20;
10 < 20;
//할당 연산자를 통한 표현식
i = 10;
total = 0;
fruits[1] = "apple";
// 함수 호출 표현식
sayHello();
**리터럴**
```jsx
1; //정수 리터럴
'Hello'; //문자열 리터럴
[1, 2, 3]; // 배열 리터럴
{age : 27}; // 객체 리터럴
function() {} //함수 리터럴
JSX에서 변수 넣기
name이라는 변수를 중괄호로 감싸 JSX에서 사용할 수 있다.
const name = "8PX";
const App = () => {
return <div>{name}</div>;
};
// 결과 : 8PX
JSX에서 함수 사용하기
function formatName(user) {
return user.firstName + ' ' + user.lastName;
}
const user = {
firstName: 'jisu',
lastName: 'kim'
};
const App = () => {
return <div>{formatName(user)}</div>
}
// 결과 : jisu kim
- 가독성을 위해 JSX를 여러 줄로 나눴다.
- 자동 세미콜론 삽입을 피하고자 괄호로 묶는 것을 권장한다.
- 참고자료 :
https://stackoverflow.com/questions/2846283/what-are-the-rules-for-javascripts-automatic-semicolon-insertion-asi
JSX에서 if문처럼 사용하기
- JSX 내에서는 Javascript 표현식만 사용 가능하다.
- if문은 문장(statments)이므로 삼항 연산자를 사용해야 한다.
const isLogin = true;
const App = () => {
// isLogin이 True이면 첫번째 요소인 <div>로그인 완료</div>의 표현식을 실행
// isLogin이 False이면 두번째 요소인 <div>로그인 해주세요</div> 표현식을 실행
return isLogin ? : <div>로그인 완료</div> : <div>로그인 해주세요</div>}
// 결과 : 로그인 완료
JSX에서 for문처럼 사용하기
for문은 문장이기 때문에 주로 map을 사용한다.
const fruits = ["사과", "감", "배", "딸기"];
const App = () => {
// fruits를 한바퀴 씩 돌면서 fruits가 끝날 때까지
// map 안에 있는 함수((fruit) => <div>{fruit}</div>)를 실행함
// 함수 안에 있는 fruit은 fruits 리스트의 각 요소입니다.
return fruits.map((fruit) => <div>{fruit}</div>);
};
// 결과 : 사과, 감, 배, 딸기
JSX 사용 시 주의 사항📌
1. React import하기
- JSX를 babel이 이해하고, Javascript로 변환하기 위해서는 import React from "react"를 해주어야 한다.
2. HTML처럼 태그를 반드시 닫기
- 태그를 닫지 않으면 컴파일 에러가 발생한다.
function App() {
return (
<div>Hello React!
);
}
// 오류
3. HTML과 달리 반드시 최상위 태그(부모 태그)가 필요
- 그 이유는? 컴포넌트 변화를 감지해 낼 때 효율적으로 비교할 수 있도록 컴포넌트 내부는 하나의 DOM트리 구조로 이루어져야 한다는 규칙이 있다.
- 최상위 태그가 없으면 컴파일 에러가 발생한다.
- 최상위 태그로 div를 사용하기 싫으면 <></> fragment를 사용하면 된다.
- fragment는 브라우저에 나타나지 않는 태그로 element들을 감쌀 때 사용한다.
import React from "react";
function App() {
return (
// 컴포넌트 최상위 부모 태그
<div>
<div>Hello React!</div>
<button>button</button>
</div>
);
}
export default App;
변수 선언 방식
- 기본적으로 const를 사용하고, 재할당이 필요할 경우 let을 사용한다.
- 그 이유는? 객체를 재할당하는 경우는 흔치 않고, const를 사용하면 재할당을 방지해 주기 때문에 안전하다.
- 참고자료 :
https://velog.io/@bathingape/JavaScript-var-let-const-차이점
참고하면 괜찮을 자료
https://developerntraveler.tistory.com/54
Author And Source
이 문제에 관하여(유용한 JSX 문법 알아보기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@jisu243/유용한-JSX-문법-알아보기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)