리액트에는 JSX라는 문법이 있다.
완전히 HTML과 동일한데(완전히는 아니지만... 거의..) 이것은 실제 자바스크립트에 해당된다고 한다.
어쨋거나...
JSX를 작성하다보면 당황스럽다...
.html 파일에서는 태그명만 입력하면 입력한 문자와 관련된 태그가 뜨고, 엔터만 치면 HTML 태그가 생성됐었는데.
JSX에서는 < 부터 /> 까지 전부 입력해줘야하는건가?
당황스럽다. 말도안되. 찾아봤다.
3초만에 해결하였다.
https://medium.com/@afulsamet/vs-code-react-js-tools-d61122dfb923
VS-Code React.JS Tools
Code snippets, Autocomplete HTML and more for React.JS
medium.com
1. Settings에 들어간다.
2. settings를 입력하고, 쭉쭉 내리다보면 이미지와 같이 JSON을 볼 수 있다.
그리고, 그 아래 Edit in settings.json을 클립해서 들어간다.
맨 아래 닫히는 중괄호 위에 }
, 를 입력하고
"emmet.includeLanguages": {
"javascript": "javascriptreact"
}
을 추가해준 뒤, 저장하고 나온다.
해결되었다.
h1 입력하면 화면에 나온다. 엔터를 치면 자동으로 태그가 생성되는 것을 볼 수 있다.
고민 해결!
'개발 > React' 카테고리의 다른 글
| [React] 저장하면 코드를 예쁘게 정렬해주는 Prettier가 작동이 안되요 (0) | 2020.07.22 |
|---|---|
| [React] vs code로 리액트 개발 시, 꼭 필요한 확장 패키지 (0) | 2020.07.22 |
| [React] 리액트 쓸때 기본적인 컴포넌트 코드 자동 완성 패키지 (0) | 2020.07.19 |
| [React] 아무 이미지나 넣고 테스트할때 필용한 npm 패키지... (0) | 2020.07.17 |
| [React] 리액트 JSX에서 HTML 자동완성(emmet) 적용하기 (1) | 2019.09.21 |
