JSX 와 Import & Export

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 폴더를 확인해보자!