TIL 13 JSX, React 기초부터

1. JSX란?

자바스크립트 문법을 확장한 리액트에서 쓰이는 고유의 문법이다. 단순히 봤을때는 html마크업과 비슷해보이지만 자바스크립트에서

쓰이는 모든 기능이 포함되어있다.

 

return() 밑에 있는 html같이 보이는 내용이 JSX 문법이다. 

 

2.  단 하나의 html 파일

CRA을 통해서 react 초기 세팅을 마치면 html파일은 하나만 있는것을 볼 수 있다.

 

단 하나의 html파일 목록

하나의 프로젝트 처음부터 끝까지 react에서는 하나만의 html 파일하나를 쓰고 나머지는 js파일에서 JSX로 구현한 내용들로 이루어진다.

 

index.html파일

 

index.js파일

index.html 파일을 보면 단하나의 div태그와 root라는 아이디가 지정되어있다. index.js파일에는 React와 ReactDom모듈을 import

한 코드를 볼 수 있다. 가장밑에 ReactDOM.render(<App />, document.getElementById('root')); 코드를 볼 수 있는데

render메소드에 첫번째 인자로는  React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 부모요소를 전달한다.

 

3.  JSX 기본 규칙

 

index.js에서 App이라는 요소를 받는다고 작성했고 이는 컴포넌트를 의미한다. 컴포넌트는 JSX로 작성한 하나의 덩어리고 

함수 또는 클래스로 작성이 가능하다. 위 App컴포넌트는 클래스형으로 작성한것이다.

class형에서는 반드시 render() 메소드가 들어가 있어야하고 보여질 요소를 return 구문에다가 작성을 해줘야한다.

return 구문에 요소가 두개이상 되면 소괄호 ()로 묶어줘야한다.

두개 이상의 형제 태그는 반드시 하나의 부모태그에 묶여있어야한다. 이를 해결하기 위해서 <> </> 빈 태그로 묶어 줄 수 있다.

 

div태그 대신 <> </>로 묶은 코드

 

자바스크립트 형태의 구문은 {} 중괄호안에다가 써준다. 위 변수 hobby와 name값을 가져오기 위해서 중괄호에 묶어서

작성한것을 볼 수 있다. 

컴포넌트를 작성한후 외부에서 가져오기 위해서 맨 아래 export default 컴포넌트명을 작성해줘야한다.

그리고 컴포넌트 가장 앞글자는 반드시 대문자로 작성을 해줘야한다.

 

이외에도 많은 문법규칙들이 있지만 가장 기초적인 문법들을 위주로 작성했다.