⚙︎ JSX란 무엇인가
JSX는 JavaScript를 확장한 문법이다. JSX로 작성한 코드는 브라우저에서 실행되기전 일반 자바스크립트 형태의 코드로 변환된다. JSX는 리액트로 개발할 떄 사용되는 문법으로 공식 문법이라하기 힘들다.
⚙︎ JSX 문법
1. 감싸인 요소
컴포넌트에 여러 요소가 있다면 반드시 부모 요소로 감싸야한다.
function main() {
return(
<div>Hello</div>
<div>world</div>
)
}만약 위와 같은 코드가 있다 가정하면 오류가 발생할 것이다. div 요소가 2개 있지만 감싸고 있는 부모요소가 없기 때문이다. 위 오류는 아래와 같은 방법으로 해결할 수 있다.
function main() {
return(
<div>
<div>Hello</div>
<div>world</div>
</div>
)
}2. JS 문법 사용
JSX에서 내부 코드를 { }(중괄호)로 감싸면 자바스크립트 문법을 사용할 수 있다. 이를 이용하여 JSX에서 변수를 사용하는 등 여러가지의 활용이 가능해진다. 주의해야할 점은 JSX 내부 의 자바스크립트 표현식에서 If문을 사용할 수 없다는 것이다. 이는 JSX문 밖 에서 if문을 사용하거나 { } 안에 삼항 연산자를 사용함으로 해결할 수 있다.
> 삼항 연산자는 AND연산자(&&)로도 구현할 수있다.
3. undefined
React 컴포넌트에서는 함수에서 undifined만 반환하여 렌더링하면 안된다. 이러한 경우 요류를 발생시킨다. 만약 어떠한 값이 undifined일 수도 있다면 OR(||)연산자를 사용하여 undifined일 경우 사용할 값을 지정하여 요류를 회피할 수 있다.
4. 자식 정의
const element = <img src={user.Url} />;위와 같이 태그가 비어있다면 />를 사용하여 바로 닫아주어야 한다.
참고한 사이트
[개발여행 blog] https://developerntraveler.tistory.com/54
[ko.React] https://ko.reactjs.org/docs/rendering-elements.html
