Front-End/React

React 리액트 소개, 설치하기

코드깎는머슴 2024. 8. 29. 22:35
728x90
반응형

React 리액트 소개, 설치하기

 

 

 

1. 소개

 

최근 만들어진 웹 사이트들을 보면, 마치 휴대폰을 보고 있는 것 같은 느낌을 준다.

그만큼 편안하다는 것인데, 이렇게 앱의 느낌이 나는 웹 사이트들을 웹 앱(Wep-app)이라고 한다.

 

웹 앱의 장점

1. 인터넷 브라우저를 기반으로 작동하기 때문에 앱을 따로 설치할 필요가 없다.

 

2. 앱으로 발행하는 것이 쉽다.

PWA나 React-native를 이용해서 편리하게 발행할 수 있다.

 

3. 앱처럼 UX적으로 뛰어난 웹사이트를 구성하기 쉽다.

이로 인해 실제로 웹 사이트에 따른 판매량이 다르다고 한다.

 

 

 

2. 설치하기

HTML에다가 리액트를 직접 설치하려면 이것저것 할것도 많고 시간이 너무 오래 걸린다고 한다.

따라서 node.js를 이용한 방법으로 가겠다.

 

1. 먼저 node.js 최신 버전을 설치한다.

2. 다음은 에디터를 설치하는데 나는 기존의 인텔리제이를 이용하겠다.

3. 원하는 위치에 폴더를 만들고, 에디터로 해당 폴더를 오픈한다.

4. 터미널에 npx create-react-app '프로젝트명' 을 입력한다.

 

node.js를 설치하는 이유는 create-react-app 라이브러리를 이용하기 위함이다.

node.js 설치하면 npm이라는 툴을 이용할 수 있다.

npm은 라이브러리들의 설치를 도와주는 역할을 한다.

 

위 과정을 진행하면 이런 구조이다.

 

public 폴더의 index.html을 통해 렌더링 중이고, 

index.js를 통해 app.js의 코드를 index.html 안에 넣어주고 있다.

 

node_modules 폴더는 라이브러리들을 모아놓은 폴더다.

CreateReactApp을 구동하려면 많은 라이브러리들이 필요한데 이곳에 모인다.

 

public 폴더는 정적인 데이터를 모아놓은 폴더다.

리액트 프로젝트를 만들고 나서 빌드, 컴파일을 하면 코드들이 압축되는데,

public 폴더에 있는 것들은 압축되지 않는다.

 

src 폴더는 그냥 흔히 아는 소스코드들을 모아놓은 것이다.

 

package.json은 설치한 라이브러리 목록들을 볼 수 있다.

npm으로 라이브러리 설치할 때마다 자동으로 버전을 포함해서 기록된다.

 

 

 

3. 화면 미리보기

이제 터미널에 npm start를 입력하면 웹 사이트를 통해 화면 미리보기가 가능하다.

 

다음의 코드를 통한 화면을 확인해보자

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>
                    안녕하세요
                </p>
                <a
                    className="App-link"
                    href="https://reactjs.org"
                    target="_blank"
                    rel="noopener noreferrer"
                >
                    Learn React
                </a>
            </header>
        </div>
    );
}

 

간단한 소개와 설치가 끝났다. 

다음 장부터는 사용법들을 알아보겠다.

728x90
반응형