react 기초 익히기 -기본 적용법, create-react-app-

프로그래밍/React

react 기초 익히기 -기본 적용법, create-react-app-

1. 정의

react 공식 웹사이트에서는..

A JavaScript library for building user interfaces

"사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리"

- 라이브러리 = "자주 사용되는 기능을 정리해 모아 놓은 것"

1-1) 사용자 인터페이스(user interface)

UI로 줄여서 부른다

사용자와 컴퓨터 프로그램이 서로 상호작용을 하기 위해 중간에서 서로 간에 입력과 출력을 제어해주는 것

웹사이트에서 버튼, 텍스트 입력창 등이 모두 UI

버튼을 눌러 웹사이트에서 반응을 하고, 웹사이트에서 특정 페이지를 보여주어서 사용자들이 반응을 함

1-2) SPA(single page application)

하나의 페이지만 존재하는 웹사이트, 애플리케이션

수백 개의 웹페이지가 존재하는 웹사이트에서 하나의 큰 HTML틀을 만들고,

사용자가 특정 페이지를 요청할 때 틀 안에 해당 페이지의 내용을 채워서 보내주는 것

2. 장점?

빠른 업데이트, 렌더링 속도

업데이트 = 웹사이트 탐색시, 화면에 나타나는 내용이 바뀌는 것

빠른 업데이트를 위해 Virtual DOM(document object model)을 사용

2-1) DOM

웹 페이지를 정의하는 하나의 객체

하나의 웹사이트에 대한 정보를 모두 담고 있는 큰 그릇

화면이 업데이트 된다는 말은 DOM이 수정된다는 말

기존 방식으로 화면 업데이트할려면, DOM을 직접 수정해야하며 DOM의 데이터에서 수정 부분을 모두 찾아야하니 매우 느리다.

리액트는 반면 업데이트해야할 최소한의 부분만 찾아서 업데이트한다.

어떤 상태의 변경이 일어나면, virtual DOM에서 업데이트해야할 최소한의 부분만 검색하고,

검색된 부분만을 업데이트하고 렌더링해서 변경된 내용을 빠르게 사용자에게 보여줄 수 있다

2-2) 컴포넌트 기반의 구조

모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러개의 컴포넌트 조합으로 구성될 수 있다

작은 레고 블록들이 모여 하나의 완성된 모형이 되는 것과 비슷하다

레고 블록을 조립하는 것처럼 컴포넌트를 조합해서 웹사이트를 개발한다

2-3) 재사용성

다시 사용이 가능한 성질

A의 CALENDAR 모듈은 DATE 모듈에 의존되어 있어서 다른 프로그램에 가면 DATE 없이는 재사용 불가능

STRING 모듈은 의존되는 모듈이 없어서 다른데서도 재사용 가능함

하지만 의존성 말고도 다른 프로그램 내에서 호환성 문제도 고려해야함

재사용성이 높다는 말은 의존성을 낮추고, 호환성 문제가 발생하지 않도록 개발해야한다는 의미

전체 소프트웨어 개발 기간이 단축되고 유지 보수가 용이하다

리액트는 컴포넌트 기반의 구조로, 각 컴포넌트가 여러 곳에서 반복적으로 사용될 수 있다

쉽고 재사용 가능한 형태로 개발한다면, 버그를 쉽게 찾아 수정할 수 있고, 어디서든 쉽게 적용이 가능해진다

2-4) 든든한 지원, 활발한 지식 공유 커뮤니티

메타라는 거대 IT기업이 시작한 프로젝트

깃허브 star개수 최상위, stack overflow 질문 답변 최상위

굉장히 큰 개발자간 커뮤니티 형성

2-5) 모바일 앱 개발 가능

react native라는 UI 프레임워크로 모바일 앱 개발 가능

자바스크립트 코딩만으로 안드로이드 ios 앱 개발 가능

물론 일반적인 방식으로 개발된 앱에 비해 성능은 조금 떨어질 수 있음

3. 단점

3-1) 방대한 학습량..?

배워야할것들이 많다는데..

꾸준히 버전업데이트가 이루어지면서, 이런 내용을 학습하고 숙지해야 실무환경에서 원활하게 작업가능

3-2) 상태관리 복잡도

state는 리액트 컴포넌트의 상태

virtual DOM이 바뀐 부분만을 찾아서 업데이트하는데, state가 이를 담당

성능 최적화를 위해 state를 잘 관리하는 것이 중요한데, 웹사이트 규모가 커질수록 복잡도가 증가함

이러한 상태관리를 위해 Redux, MobX, Recoil 등 외부라이브러리를 사용하기도함

4. 간단 실습

4-1) <head>태그

<html>
    <head>
        <title>윤대혁</title>
    </head>
    <body>
        <h1>환영합니다</h1>
    </body>
</html>

<head> 태그 안에 <title>태그를 이용해 작성하면 브라우저 탭 부분에 작성한 제목이 보인다

<body> 태그 부분에 실제 웹사이트에서 나오게 될 내용을 작성하면, 실제로 작성한 내용이 다음과 같이 나온다

4-2) css

styles.css로 다음과 같이 작성

h1 {
    color: green;
    font-style: italic;
}

<link> 태그를 이용하면 현재 HTML파일과 외부 리소스 사이 관계를 정의할 수 있다

CSS파일을 불러오거나, 웹브라우저의 탭에 나오는 아이콘인 favicon 같은 것을 넣기 위해 가장 많이 사용된다

<html>
    <head>
        <title>윤대혁</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>환영합니다</h1>
    </body>
</html>

당연하지만 href="styles.css"라고 적으면.. 파일 경로가 적절한지 확인해야한다

index.html과 styles.css가 같은 위치에 있도록

4-3) react.js 추가

첫번째로 HTML 파일에 DOM 컨테이너를 추가해야한다

root라는 id를 가지는 <div>태그를 추가

이 <div>태그가 DOM 컨테이너로 사용된다

<html>
    <head>
        <title>윤대혁</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>환영합니다</h1>

        <div id="root"></div>
    </body>
</html>

다음으로 <script>태그로 리액트의 자바스크립트 파일을 가져온다.

공식홈페이지에서 가져오면 됨

https://ko.reactjs.org/docs/cdn-links.html

CDN 링크 – React

A JavaScript library for building user interfaces

ko.reactjs.org

<html>
    <head>
        <title>윤대혁</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>환영합니다</h1>

        <div id="root"></div>

        <!-- 리액트 가져오기 -->
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    </body>
</html>

간단한 리액트 컴포넌트를 작성해본다

//MyButton.js
function MyButton(props){
    const [isClicked, setIsClicked] = React.useState(false);

    return React.createElement(
        'button',
        {onClick: () => setIsClicked(true)},
        isClicked ? 'Clicked!' : 'Click here!'
    )
}

const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer);

위에서 마지막 두줄은 ReactDOM의 render함수를 사용해 리액트 컴포넌트를 DOM 컨테이너에 렌더링하는 코드이다.

script태그로 가져오더라도, 컴포넌트가 화면에 보이는 것은 아니기때문에 필요하다.

마지막으로 <script src = ""></script>를 이용해, 작성한 리액트 컴포넌트를 가져온다

<html>
    <head>
        <title>윤대혁</title>
        <link rel="stylesheet" href="styles.css">
    </head>
    <body>
        <h1>환영합니다</h1>

        <div id="root"></div>

        <!-- 리액트 가져오기 -->
        <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
        <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
        
        <!-- 리액트 컴포넌트 가져오기 -->
        <script src = "MyButton.js"></script>
    </body>
</html>

버튼을 클릭하면, 리액트 컴포넌트의 state가 변경되어서 버튼이 바뀜

5. create-react-app

위에서 리액트를 어떻게 적용할지 배웠는데

새로운 웹사이트를 만들때마다 매번 그렇게 하면 번거롭다

처음부터 리액트가 적용되어 있는 상태로 개발을 하게 만들어주는 것이 create-react-app

리액트로 웹 애플리케이션을 개발하는 데 필요한 모든 설정이 되어있는 상태의 프로젝트를 생성해주는 도구이다.

줄여서 CRA라고도 부름

5-1) 시작하기

프로젝트를 시작하고자 하는 폴더 내에서 gitbash로

$ npx create-react-app <your-project-name>

예시) $npx create-react-app my-app

프로젝트 생성이 완료되면 위 화면에 보이는 것처럼 애플리케이션을 실행시킬 수 있는 명령어를 제공함

cd my-app에서 cd는 change directory의 약자

생성한 my-app 프로젝트 폴더로 들어가고, npm start라는 명령어로 애플리케이션을 실행한다

성공적으로 실행시키면 위와 같은 그림이 나오고 localhost:3000으로 진입함

'프로그래밍 > React' 카테고리의 다른 글

리액트 기본 배우기 -훅에 대해서- (0)	2023.01.12
리액트 기본 배우기 -state에 대하여- (0)	2023.01.12
리액트 기본 배우기 -컴포넌트에 대하여- (1)	2023.01.10
react 기본 익히기 - element에 대하여- (0)	2023.01.10
react 기본 익히기 -JSX에 대하여- (1)	2023.01.09

TAGS.

통계학 세상

통계학 세상

통계학 세상