생활코딩 React ~컴포넌트 만들기까지

설치

생활코딩 React 실습을 따라하려면 2가지 방법 중에 하나를 쓰면 된다.

 

첫번째는 스택블릿츠라는 웹 서비스를 이용하는 방법이다.

이 방법을 이용하면 컴퓨터에 React를 설치할 필요가 없기 때문에 편하게 배울 수 있다.

https://stackblitz.com/edit/react-dq5bad?file=src%2Findex.js

React (forked) - StackBlitz

두 번째 방법은 create-react-app 을 이용하는 것인데 이 앱을 사용하려면 우선 nodejs가 설치되어 있어야 한다.

nodejs가 설치되어 있지 않다면 설치해주자 -> https://nodejs.org/ko

nodejs가 설치되었다면 명령프롬프트 창을 열어 다음을 입력해 현재 폴더에 리액트 프로젝트를 생성한다.

npx create-react-app .

성공적으로 리액트 프로젝트가 생성되면 src폴더, public 폴더가 생성되고 그 안에 여러 파일들이 생성됨을 볼 수 있다.

public/index.html은 html의 템플릿 파일로 head정보가 들어가고 실제 body는 src/index.js 파일과 src/App.js 파일에 의해 들어간다.

실행

리액트 프로젝트가 만들어졌다면 실행은 다음과 같이 하면 된다.

npm start

수정

src/index.js에는 root element를 얻어 App이라는 것을 Render 하겠다는 의미를 가지고 있다. 

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

이 App은 

import App from './App'; 에 의해 import 된 것이며 src/App.js를 확인하면 실제 내용이 있음을 볼 수 있는데, 

App.js를 다음과 같이 바꿔주면 페이지도 바뀌는 것을 알 수가 있다.

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

빌드

npm start 명령어는 개발용으로 사용되므로 실제 배포 시에는 빌드를 해주어야 한다. 

npm run build // 빌드하면 build 폴더가 생성된다.
npx serve -s build // 빌드 된 build 폴더로 서비스

컴포넌트 만들기

리액트의 핵심은 사용자 정의 태그를 만드는 것이고 이 사용자 정의 태그를 리액트에서는 컴포넌트라고 한다.

컴포넌트를 부품으로 하면 복잡도를 낮춰서 개발을 할 수 있고, 다른 사람에게 부품으로 코드를 제공하여 생산성을 끌어올릴 수 있다는 장점이 있다.

 

컴포넌트를 만들려면 다음과 같이 함수를 만들어서 쓰면 된다고 한다.

function Header(){
  return (
  <header>
  <h1><a href="/">WEB</a></h1>
</header>
);
}
function Nav(){
return (
  <nav>
  <ol>
    <li><a href="/read/1">html</a></li>
    <li><a href="/read/2">html</a></li>
    <li><a href="/read/3">html</a></li>
  </ol>
  </nav>
);
}
function Article(){
return  (
  <article>
  <h2>Welcome</h2>
  Hello, WEB
  </article>
);
}

function App() {
  return (
    <div>
      <Header></Header>
       <Nav></Nav>
      <Article></Article>
    </div>
  );
}