[React] 리액트 시작하기

1, 리액트 컴포넌트 만들기

새로운 파일을 생성해줍니다.

파일 이름은 임의 test로 하고 js 형식으로 저장합니다.

 

리액트 컴포넌트를 만들 때는 

import로 리액트를 불러와야 하는데

import React from "react"; 를 제일 첫 줄에 작성해줍니다.

 

제일 하단에는 컴포넌트를 내보내는 코드를 작성해줍니다.

이 코드가 있어야 다른곳에서 컴포넌트를 불러와 사용할 수 있습니다.

export defalut Study;

 

첫줄과 마지막 줄 사이에는 컴포넌트 형태가 들어가게 되는데, 

리액트는 함수형과 클래스형 이렇게 두 가지가 있습니다.

 

일단 함수형으로 정리할게요

Study.js 로 저장해준다음, 아래 코드를 작성해줍니다.

import React from "react";

function Study() { 
    return (
        <div>
            hello world!
        </div>
    );
}

export default Study;

 

그다음 기존에 있던 App.js 파일로 들어가 코드를 편집해줍니다.

import 부분과 컴포넌트를 불러오는곳을 수정해 준 다음, 프로젝트를 실행시켜주면

import React from 'react';
import Study from './Study.js';

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

export default App;

브라우저에 hello worl! 가 뜹니다.

성공!