리액트의 기본문법 JSX
2021. 4. 4. 19:44ㆍ개발공부/리액트 기초
리액트 프로젝트 생성 후 기본적인 파일들을 알아보자!
index.html -> 빈 껍데기 html파일: 파일안에 아무런 내용은 없지만, react모듈, react-dom모듈 그리고 App.js파일을 불러오고있다.
app.js 파일에서 JSX문법의 함수형 컴포넌트를 이용해 빈껍데기 html에 필요한 것들만 보내서 실제 웹 페이지를 구성한다.
이런 형식을 SPA(=Single Page Application)라고 부른다.
리액트는 JSX문법을 사용해 리액트 요소를 만들고 DOM에 렌더링 시켜 뷰를 그린다.
*JSX는 확장된 자바스크립트
JSX사용법
*개발자 도구 맥 단축키 [cmd + opt + i]
1. 태그는 꼭 닫아주기
<input type='text'/>
2. 무조건 1개의 엘리먼트 반환
3. JSX에서 자바스크립트 값을 가져오거나 map, 삼항연산자 등 JS문법을 JSX안에서 쓸땐 중괄호{}를 이용한다.
4. 태그 내에서 클래스명 정해줄 때 속성값은 class가 아닌 className 사용!
5. 인라인으로 스타일 줄 땐 css문법 대신 json형식으로 넣어준다.
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>
또는 스타일 딕셔너리를 변수로 만들어 쓰기
'개발공부 > 리액트 기초' 카테고리의 다른 글
Ref (0) | 2021.04.10 |
---|---|
라이프 사이클 (0) | 2021.04.10 |
styled-components (0) | 2021.04.10 |
SCSS (0) | 2021.04.10 |
리액트 앱(프로젝트) 생성하기 (0) | 2021.04.10 |