JSX
리액트에서 컴포넌트 생김새를 정의할 때 사용하는 자바스크립트를 확장한 문법이다.
JSX 규칙
1 태그는 닫혀 있어야한다.
2 return 안에서 두 개 이상의 태그는 하나의 태그로 감싸주어야 한다.
<div>를 사용해 줄 수도 있고 <fragment> 태그를 사용해줄 수도 있다.
3 css 속성을 객체로 만들어 적용한다.
작성법
export default function New() {
const Box = styled.div`
width: 50px;
heigt: 50px;
`
return (
<div>
<Box>안녕하세요!!</Box>
</div>
)
}
JSX 에서는 CSS-in-JS 방식으로 작성한다.
이때 export defautl function New() 부분은 화살표 함수로 작성해 줄 수도 있다.
export default function New() {
const Box = styled.div`
width: 50px;
heigt: 50px;
`
return (
<div>
<Box>안녕하세요!!</Box>
</div>
)
}
export default New()이때 주의할 점은 페이지 가장 맨 하단에 export default New()를 작성해 주어야한다는 점이다.
처음엔 어색하더라도 익숙해지면 기존 html, css를 사용할 때보다 훨씬 더 직관적이어서 편해진다. 그렇다고 해서 index.js 파일에 바로 JSX문법을 적용할 수는 없다.
Import 와 Export
import와 export는 문자 그대로 내보내고 받아오는 기능을 가지고 있다. 자바스크립트를 좀 더 편리하게 사용하기 위해서 우리는 위의 예시 코드에서 적었던 것처럼 함수나 변수를 내보낼 수도 있고 모듈을 가져와 사용할 수도 있다.
JSX는 모듈을 import 해야 사용할 수 있다.
import styled from '@emotion/styled이런 식으로 페이지 가장 윗부분에 작성해주면 된다. 다른 모듈 또한 마찬가지다. 모듈이 저장된 이름을 모르겠다면 설치된 node_modules 폴더를 확인해보자!
