[리액트 공부] 1. 프로젝트 생성, 컴포넌트 만들고 내보내기, JSX 기초

* 아래 내용은 '벨로퍼트와 함께하는 모던 자바스크립트' 튜토리얼을 따라 요약 또는 내용 추가한 것으로 자세한 내용은 해당 강의를 참고해 주시기 바랍니다.

 

새 프로젝트 만들기

1. 리액트 프로젝트 만들기

$ npx create-react-app begin-react

 

2. 프로젝트 실행시키기

$ cd begin-react
$ yarn start

• 이러면 아래 사진과 같이 "http://localhost:3000/" 페이지가 자동으로 열린다.

 

 

컴포넌트 만들기

1. src 디렉터리에 Hello.js라는 파일 작성

• 컴포넌트는 함수형태 또는 클래스 형태로 작성할 수 있다.
• export default로 컴포넌트 내보내기를 하면 다른 컴포넌트에서 불러와서 사용 수 있다.

import React from 'react';

function Hello() { // 컴포넌트
    return <div>안녕하세요</div>
}

export default Hello; // 컴포넌트 내보내기

 

2. App.js에서 Hello 컴포넌트 사용하기

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div>
      <Hello />
    </div>
  );
}

export default App;

• App.js를 위와 같이 수정한 후, yarn start를 하면 다음과 같이 페이지가 나온다.

 

 

JSX

JavaScript를 확장한 문법. UI가 어떻게 생겨야 하는지 설명하기 위해 사용하는 문법.

 

 

1. Fragment

• 태그는 무조건 하나의 태그로 감싸져있어야 한다.

<div>
  <Hello />
  <div>안녕히계세요</div>
</div>

• 하지만, 이렇게 단순히 감사기 위하여 불필요한 div로 감싸는게 별로 좋지 않은 상황도 있다.
• 이럴 때는 리액트의 Fragment라는 것을 사용할 수 있다.
• 이름 없는 태그를 작성하면 Fragment가 만들어지는데, Fragment는 브라우저 상에서 별도의 엘리먼트로 나타나지 않는다.

<>
  <Hello />
  <div>안녕히계세요</div>
</>

 

 

2. JSX 안에 자바스크립트 값 사용하기

• JSX 내부에 자바스크립트 변수를 보여줘야 할 때에는 {}으로 감싸서 보여줘야 한다.

<>
  <Hello />
  <div>{name}</div>
</>

 

3. 태그에 style과 css 설정하기

• 인라인 스타일
  • 객체 형태로 작성해야 한다.
  • camelCase 형태로 네이밍해야 한다.

function App() {
  const name = 'react';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: 24, // 기본 단위 px
    padding: '1rem' // 다른 단위 사용 시 문자열로 설정
  }

  return (
    <>
      <Hello />
      <div style={style}>{name}</div>
    </>
  );
}

 

 

 

* 문서 전체 코드 자동 정렬: shift + option(⌥) + f