[REACT] CRA(create-react-app)/ JSX란?

■  CRA가 무엇인가?

 

React는 레고같은 친구이다.

레고로 성을 만드는 것 처럼 우리는 리액트를 사용해서 웹 사이트를 만든다.

레고는 네모 블록, 긴블록 등등 자기가 원하는 것을 따로 살 수 있다.

리액트도 마찬가지로 자신이 필요한 것들을 하나씩 설치할 수 있다.

그런데 레고로 하나씩 구매하기 귀찮으면 해리포터 성만들기 같은 패키지를 사는 것처럼

CRA는 웹사이트를 만들때 필요한 것을 몽땅 넣어서 만든 패키지이다.

 

 

 

 

■ JSX란?

리액트에는 딱 하나의 html파일만 존재한다.

(public 폴더안에 있는 index.html)

그럼 리액트에서는 어떻게 뷰를 그리냐?

JSX문법을 이용해서 React요소를 만들고 DOM에 렌더링 시켜서 그린다.

 

HTML을 품은 JS === JSX 이다.

HTML태그는 .js파일 안에는 쓸 수 없는데 JSX를 사용해서

자바 스크립트 안에서 html 태그같은 마크업을 넣어 뷰 작업을 편하게 할 수 있다.

<div>
	<h1>안녕하세요!</h1> 
	<p>시작이 반이다!</p>
</div>

↓

const start_half = <div>
    <h1>안녕하세요!</h1>
    <p>시작이 반이다!</p>
  </div>;

 

 

 

 

◎ JSX규칙

1. 태그는 꼭 닫아주기

2. 무조건 한개의 엘리먼트 반환하기

return (
    <p>안녕하세요! 리액트 반입니다 :)</p>

    <div className="App">
      <input type='text'/>
    </div>
  );

XXXXXXXXXXX

return (
    <div className="App">
      <p>안녕하세요! 리액트 반입니다 :)</p>
      <input type='text'/>
    </div>
  );

OOOOOOOOO

 

 

3. JSX에서 자바스크립트 값을 가져오려면? 중괄호를 쓴다.

const cat_name = 'perl';
// return 부분만 복사해서 붙여넣고 크롬 브라우저로 돌아가 새로고침 해봅시다.
    return (
      <div>
        hello {cat_name}!
      </div>
    );

 

4. class대신에 className을 쓴다.

<div className="App">

 

5. 인라인으로 style주기

// 중괄호를 두 번 쓰는 이유? 딕셔너리도 자바스크립트니까요!
// 이렇게 쓰거나,
<p style={{color: 'orange', fontSize: '20px'}}>orange</p>

//혹은 스타일 딕셔너리를 변수로 만들고 쓸 수 있어요!
function App() {
  const styles = {
    color: 'orange',
    fontSize: '20px'
  };

  return (
    <div className="App">
      <p style={styles}>orange</p>
    </div>
  );
}

 

 

 

 

강의 출처: 스파르타 코딩 클럽