[TIL] React <1> - JSX

react 첫 만남

코딩을 공부하면서 정말 많이 들은 단어 중 하나인 리액트 React.. 드디어 리액트를 접하게 됨
리액트를 배울때는 현업개발자라도 어렵다고 해서 걱정이 되기도 했지만.. 리액트는 현재 가장 인기있는 자바스크립트 라이브러리이기 때문에 기대도 된다.🙂

라이브러리(library)는 도서관이라는 사전적 의미가 있지만 다르게 웹 개발 분야에서는 다른의미를 가지고 있다.
여기서 라이브러리란 재사용이 필요한 기능으로 똑같은 코드를 반복적으로 작성하는 일을 없애기 위해 필요할때마다 바로 호출해서 사용할 수 있도록 class나 function으로 만들어진 것이다.
React.js는 JavaScript의 라이브러리이다.

JSX

const hello = <h1>Hello world!</h1>

위 보이는 코드는 JavaScript도 아니고 HTML도 아닌 JSX라고 하는 JavaScript의 확장버젼(Syntax Extension for JavaScript)이다.

JSX는 JavaScript문법이 아니기때문에 브라우저가 해석하지 못한다. JSX로 작성된 React.js를 사용하기 위해서는 해당 파일을 자바 스크립트로 변환시키는 컴파일 과정을 거쳐야 한다.

JSX 특징

1. attribute

const myFavorite = {
    food : <li className="item">pasta</li>
    animal : <li className="item">dog</li>
    hobby : <li className="item">reading books</li>
}

JSX는 태그 속성(attribute)도 조금 다르게 쓴다. html의 class를 className로 써야한다. 이 외에도 차이점을 알고싶을 땐 React 공식 문서를 보면 도움이 된다!(한국어도 지원 됨👍)

2. self-closing tag

JSX는 어떤 태그도 셀프 클로징이 가능하다.

<input />
<img />
input이나 img태그처럼 원래 셀프 클로징 태그라도 JSX에서는 끝에 꼭 /를 넣어주어야 한다.
<div /> 는 <div></div>와 같은 의미

3. Nested JSX

• 소괄호로 감싸기 (필수)

 const a = (
    <div>
      <p>hello</p>
    </div>
 );

중첩된 요소를 만드려면 꼭 소괄호 ( ) 로 감싸야 한다.

• 항상 최상위 부모태그로 감싸야 한다. (필수)

틀린 예 (두개의 태그로 시작)

const a = (
    <p></p>
    <p></p>
)

옳은 예 (하나의 태그로 시작)

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);