첫번째 React 앱 만들기

create-react-app을 통해 리액트 개발을 위한 설정을 완료하였다면, 해당 디렉토리안에 src라는 디렉토리가 있을것이다. 이 디렉토리가 개발이 이루어지게 되는 디렉토리다.

 

JSX

우선 JSX에 대해 언급하고 갈 필요가 있다.

JSX는 마크업 언어의 형태를 띄고 있지만 이 코드는 실제 동작을 위한 코드는 아니다. 이 코드들은 babel 이란 모듈을 통해 실제 동작하는 js코드로 변환이 되어 동작이 이루어지게 된다.

 

import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

리액트 최초 세팅 후 App.js파일을 확인하면 다음과 같다.

App()이라는 함수의 리턴값으로 다음과 같은 마크업 언어로 쓰여져 있는것을 알 수 있다. 이는 실제 HTML언어는 아니고, 오히려 js쪽에 더 가까운 형태다. 이 JSX 코드들은 babel을 통해 빌드를 거쳐 js코드로 사용되게 된다.

 

JSX는 이러한 컴포넌트를 구성하기 위한 방법중 하나이며, 몇가지 규칙이 있다.

그중 하나로 컴포넌트는 무조건 최외각에 하나의 태그를 통해 감싸져야 한다는 규칙이 있다.

지금 예제를 보면 최외각은 <div> 태그를 통해 감싸져 있다. 하지만 만약 두개 이상의 태그로 이루어진 컴포넌트 

ex)

return (
    <div>
    ...
    </div>
    <div>
    ...
    </div>
    )

다음과 같은 형태를 띄게 되면 오류가 나게 된다.

 

예제 만들기

다음과 같이 버튼을 누르면 숫자가 올라가는 예제다.

 

1. 컴포넌트 만들기

Counter.js

import React, {useState} from "react";

function Counter() {    
    const [n, set_n] = useState(0);
    return (
        <>            
            <div>{n}</div>
            <button
                onClick ={() => {
                    set_n(n => n += 1)
                }}
            >up</button>
        </>
    )
}
export default Counter;

숫자를 나타낼 박스 하나와, 버튼 하나가 들어있는 컴포넌트를 만들어 준다.

 

2. 컴포넌트 사용

App.js 파일로 가서 다음과 같이 컴포넌트를 사용한다.

Counter 컴포넌트를 import해 App에서 사용하는 간단한 예제다.

App.js

import Counter from './Counter';

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

export default App;

 

여기서 컴포넌트의 장점을 확인할 수 있다.

컴포넌트는 독립적으로 동작하게 된다. 고로 같은 컴포넌트를 여러번 사용하더라도, 각 컴포넌트간 간섭이 없이 사용이 가능하다.

 

 

만약 다음과 같이 Counter 컴포넌트를 여러번 사용하더라도, 각 컴포넌트는 자신의 고유한 state를 가지고 있기 때문에 다른 컴포넌트의 영향을 받지 않고 자신의 버튼에만 반응하게 된다.

import Counter from './Counter';

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

export default App;