[React.js] React 이론 및 App 생성 방법

React의 컴포넌트란?

- 리액트로 만들어진 앱을 이루는 최소한의 단위

- 각각의 구역을 정의 하여 영역 별로 관리하는것을 이야기 한다

- 컴퍼넌트는 데이터를 입력받아 state 상태에 따라 Dom Node를 출력하는 함수이다

예시

const MyComponent = () => {
    return (
        <div>
            Hello React!
        </div>
    );
};

 

리액트 에서는 특수한 변수를 저장할수 있는데 그것을 state의 값이 변함에 따라 각각 다른 UI를 화면에 랜더링을 할수가 있다(랜더링이란 UI 요소를 화면에 그려내는 것을 말한다.)

 

Virtual DOM

리액트는 가상돔(virtual Dom) 이라는 것을 가지고 있다

가상돔은 실제 돔을 copy하여 만들어 둔것으로 실제 돔에 반영하기 전에 가상돔이 먼저 반영을 한후

한번에 실제 돔으로 반영을 한다.

 

리액티 App 생성하기

vite를 사용하여 프로젝트를 생성 할것이다.

터미널을 열어서 npm create vite@latest 입력하기

이단계에서 y를 해주시고 이미설치가 되어있으면 넘어가도 된다

프로젝트 이름 정해주기

프로젝트명을 정했다면 어떤 프레임워크를 사용할것인지 나온다 React 선택 하면 된다.

프로젝트마다 사용하는 타입이 다름으로 필요한 것을 선택하면 된다.

지금 나는 javaScript만 사용할것이다.

프로젝트 생성 완료

npm install 을 해주자

public 폴더에는 이미지 파일이나 폰트 또는 동영상 같은 정적인 파일들을 보관하는 저장소라 생각하면된다.

해당 파일은 개발자들 사이에 코드 스타일을 통일하는데에 도움을주는 도구이다.

npm run dev를 하면 서버가 구동된다.

구동후 바로 아래에 웹 페이지에 접근할수 있는 주소가 나오게된다.

해당 주소로 접근하게 된다면