리액트의 기본문법 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