리액트의 인덱스(index) 파일과 JSX 문법에 대해서 알아보려고 한다. 강의로 들을 때는 어렵지 않은데 막상 블로그에 정리를 하려고 하니 어떤 순서로 써야할지 잘 모르겠다. 혼자 배우는 것과 다른 사람도 알아들을 수 있게 정리하는 것은 난이도가 다르다. 이래서 배움의 끝은 가르침이라고 하나 보다.
index.html 파일과 index.js 파일
리액트 프로젝트를 생성하고 보면 public 폴더에는 index.html 이라는 파일이 들어있고, src 폴더에는 index.js 라는 파일이 들어있다. 둘다 index 라는 이름을 가지고 있는데 파일 확장자가 다르다. 이들은 어떤 관계를 가지고 있을까?
먼저 index.html 은 웹브라우저에서 가장 먼저 인식하고 실행되는 파일이다. 그리고 index.js는 위 파일이 열리고 나서 열리는데, 리액트 코드 중에서는 가장 먼저 실행된다고 볼 수 있다.
index.js 파일 중간 부분에서 render 라는 단어를 발견할 수 있다.
이 단어는 '화면을 그린다'는 의미인데 리액트에서는 render 메서드로 html tag를 만들어 준다. 인수(argument)값을 문자열 형태가 아니라 html tag 그대로 작성할 수 있다. 이것은 순수한 자바스크립트 문법이 아니라 리액트에서 지원하는 jsx라고 불리는 문법이다.
뭔소린지 모르겠다면 그냥 리액트에서도 html tag를 사용할 수 있구나, 라고만 일단은 이해하고 넘어가자.
index.js 파일 안에 아래와 같이 Hello, React 라는 코드를 삽입했다.
root.render (
<h1>Hello, React!</h1>
);
index.html 파일 안에는 아래와 같이 root 값을 body에 출력하는 코드가 있다.
<body>
<div id="root"> </div>
</body>
npm run start 커맨드를 통해 이를 실행하면, 브라우저 화면에 Hello, React! 라는 텍스트가 화면에 출력된다. 개발자 도구를 통해서 코드를 살펴보면 아래와 같이 보인다.
리액트에서 사용하는 JSX 문법
JSX 문법이란 자바스크립트와 html을 섞어서 쓸 수 있는 자바스크립트 확장판이라고 생각하면 된다. <div> 등의 태그나 <p id="today> 같은 태그 속성도 그대로 사용할 수 있다. 다만 주의해야 할 점이 몇가지 있다. 대표적으로 class 속성을 주고 싶을 땐 html 과는 달리 className 이라고 적어 주어야 한다.
<p className="today">나는 JSX를 오늘 처음으로 알게 되었다.</p>
또한 for를 사용할 때에도 htmlFor 라고 적어 주어야 한다.
<form><label htmlFor="name">이름</label><input id="name" type="text"></form>
이벤트 핸들러들의 속성도 조금 다르게 쓴다. 예를 들어, 아래와 같은 코드가 있다고 하면
onblur="" onfocus="" onmousedown=""
리액트에서는 두번째 단어부터는 첫글자를 대문자로 작성해주어야 한다. 이러한 표기법을 낙타의 등을 닮았다고 하여 카멜 케이스(camelCase)라고 부른다.
onBlur="" onFocus="" onMouseDown=""
그리고 JSX 문법에서 자바스크립트 코드를 활용하려면 중괄호({})로 감싸주어야 한다. 자바스크립트 코드를 중괄호로 html tag 안에서 구현한 예제를 이미지로 확인해 보자.
위에서는 변수를 예제로 사용했지만, 중괄호 안에는 변수 뿐만 아니라 자바스크립트로 된 표현식은 무엇이든 사용할 수 있다. 단, if문과 for문과 함수 선언 같은 자바스크립트 문장은 사용이 불가하다.
위와 같이 자바스크립트 표현식을 사용한 뒤에 npm run start 커맨드를 실행하면, 아래의 화면을 얻을 수 있다.
시작 버튼을 누르면 alert 창도 잘 동작한다.
여기서 잠깐! num run start 커맨드가 궁금하다면 아래 링크 클릭!
2023.01.02 - [퍼블리싱 & 프론트엔드/React] - 리액트 프로젝트 생성 & 개발모드 실행하기
리액트 프로젝트 생성 & 개발모드 실행하기
리액트 환경 세팅을 마쳤으니 이제 본격 리액트 공부 시작이다. 누군가 말하기를, 개발 공부는 세팅이 반이라고 했는데... 정말일까? 세팅은 정말 빨리 끝났는데... 공부도 그렇게 휘리릭 되었으
heinafantasy.com
'퍼블리싱 & 프론트엔드 > React' 카테고리의 다른 글
| JSX 문법 작성하는 방법 (0) | 2023.01.10 |
|---|---|
| <div> 대신에 <Fragment>, 프래그먼트 축약형 문법 쓰기 (0) | 2023.01.08 |
| 리액트 개발자 도구(React Developer Tools) 설치하기 (0) | 2023.01.02 |
| 리액트 프로젝트 생성 & 개발모드 실행하기 (0) | 2023.01.02 |
| 맥(Mac)에서 리액트(React) 환경 세팅하기 (0) | 2021.10.18 |
댓글