[2] React.js 독학 - hello world

들어가기 전에..

react 환경세팅하는 방법은 아래 링크를 타고 들어가서 확인하면 된다. (링크 참조)

https://jh-healing-place.tistory.com/56

[react.js] 리엑트 개발환경 세팅하기

---

1. hello world 띄우기 (app.js)

app.js을 아래와 같이 수정해주면 화면에 hello world가 정상적으로 뜨는 것을 확인 할 수 있다.

// app.js
import "./App.css";

function App() {
  return (
    <div className="App">
      <p>hello world</p>
    </div>
  );
}

export default App;

 

2. hello world 문구 꾸미기 (css작업)

// App.css

.App {
  border: 1px solid #333;
  border-radius: 10px;
  width: 300px;
  height: 100px;
  margin: 0 auto;
  margin-top: 20px;
}
.App p {
  font-weight: 600;
  font-size: 20px;
  text-align: center;
}

hello world에 css가 씌워진 모습!

 

3. 함수형 컴포넌트

3-1. src 폴더 안에 pages라는 폴더를 하나 만들어주고 home.js라는 파일을 하나 만들어준다.

 

3-2. home.js 파일에서 아래와 같이 코드를 작성해준다.

import React from "react";

function Home() {
  return <h1>Home 화면 입니다</h1>;
}

export default Home;

 

3-3. app.js에서 Home을 import해준다.

( 화면에 "Home 화면 입니다."라는 문구가 추가로 출력 될 것입니다. )

import "./App.css";
import Home from "./pages/home"; // Home import해주기

function App() {
  return (
    <div className="App">
      <Home /> // Home 추가
      <p>hello world</p>
    </div>
  );
}

export default App;

함수형 컴포넌트까지 적용된 모습

 

<리엑트 주요 파일 정리>
1. index.js : src 폴더에 포함되어 있다. 메인 프로그램이라고 할 수 있다. 여기에서 HTML 템플릿 및 JavaScript의 컴포넌트를 조합하여 렌더링하고 실제 표시한다.

2. App.js : src 폴더에 있다. 이것은 컴포넌트를 정의하는 프로그램이다. 실제로 화면에 표시되는 내용 등은 여기에서 정의된다.

3. index.html : public 폴더에 있다. 메인 프로그램인 index.js에 대응되는 것으로, HTML 템플릿 파일이다. 이 파일이 직접 표시되는 것은 아니고, index.js에 의해 일어 와서 렌더링된 결과가 표시된다. (index.html 이름을 바꿀시 오류발생)

 

---

다음 강에서는 앞서 만든 Home이라는 함수 컴포넌트를 라우팅하는 방법에 대해서 알아보겠습니다.

The End

 

 

https://www.youtube.com/watch?v=6GECT2Jrr_g&t=178s 

참고 동영상