JSX, Component, React 시작하기

JSX

jsx는 JavaScript XML를 의미합니다. JSX는 리엑트에서 사용하는 방식으로, JSX로 만든 코드를 Babel이라는 변환기를 통해 자바스크립트로 DOM을 조작할 수 있습니다. 이를 이용하면 html과 javascript라는 두 파일로 나누어 해야하는 작업을 javascript에서 모두 처리를 할 수 있습니다.

JSX 사용방법

1. 해당 자바스크립트 파일에 react를 import 해준다

import React,  from 'react';

2. 대문자로 함수를 정의해 컴포넌트를 만든다.

fuction App(){
	return 코드
}

3. 하나의 엘리먼트 안에 모든 엘리먼트가 다 포함되게 리턴해야 한다.

fuction App(){
	return (
    <div>
      <div>
      <img src="https://~~~"/>
      </div>
      <div>
      </div>
    </div>
    )
}

4. 클라스 속성은 className으로 지정해야한다.

fuction App(){
	return (<div className="wrapper">클라스가 래퍼인 요소</div>)
}

5. 자바스크립트의 변수를 사용할 때에는 중괄호를 이용한다.

fuction App(){
  const wrapper = "래퍼라는 래퍼";
	return (<div className="wrapper">{wrapper}</div>)
}

6. 조건부 렌더링은 if문이 아닌 삼항연산자를 이용해야 한다.

fuction App(){
  const wrapper = "1";
	return (<div className="wrapper">{wrapper === "1" ? (<p>"true"</p>) : (<p>"false"</p>)}</div>)
}

7. 여러개의 엘리먼트를 표시할 때 map을 사용하고, 항상 키값을 주어야 한다.

{tweetsss.map((tweet)=>{
          return <Tweet tweet = {tweet} key={tweet.id}/>

Component

컴포넌트는 리엑트에서 많이 중요한 개념이다. 컴포넌트는 페이지의 구역을 나누어 각자 따로 동작하도록 만들어 주어 코드의 수정에 용이하다는 장점이 있다. 또 페이지의 일부분에 변화를 줄 때 페이지의 전체를 불러오지 않아도 되어, 처음 페이지를 렌더링 하기에 시간이 다소 추가되는 부분은 있지만, 이후에 페이지 변환에 있어 시간을 단축해준다.

create-react-app

이 코드를 이용하면 손쉽게 필요한 리포지토리가 다운이 된 리엑트 폴더를 만들 수 있다. 

npx create-react-app@latest 폴더이름

터미널에 위의 코드를 입력하면 폴더이름이라는 폴더에 최신버전의 리엑트가 설치된 상태에서 리엑트를 사용하기 위한 기본적인 구조들의 파일들 까지 만들어진 상태의 폴더가 만들어진다.