[React] React 시작하기

KAYA·2021년 11월 5일

목록 보기

1/6

리액트 React (React.js 또는 ReactJS)

자바스크립트 라이브러리의 하나로, 싱글페이지 애플리케이션/모바일 애플리케이션 개발에 사용되기 때문에 웹이지만 앱처럼 작동하는 모습을 보인다.
페이스북이 개발한 라이브러리이며 개별 개발자 및 기업들 공동체에 의해 유지보수되고 있다.

Why React?

높은 점유율
- 세계 웹 사이트 상위 10만개 중 약 45%에 달하는 웹사이트가 리액트로 만들었다.
  ex) facebook, airbnb ...
- 많은 거대 기업이 리액트로 서비스를 하고 있기 때문에 React는 끊임없이 개선되고 있다. 즉, 사라질 가능성이 적다. (한 번 배워두면 아마 10년은 거뜬!)
- 그렇기에 확장 가능성이 높다.
빠르다
- 빠른 속도로 interactive한 UI를 구현할 수 있다.
- react는 빈 html을 로드하기 떄문에 처음에 빠르게 로딩이 가능하다. js가 모든 요소를 생성해 만들고 html에 push한다.

html보다 데이터 바인딩이 편리하다. (Angular, Vue도 마찬가지)

👀 데이터 바인딩?
데이터를 가져와서 변수에 저장하고 HTML에 꽂아 넣는 작업

javascript에서 데이터바인딩 :
document.getElementById("sth").innerText = "abc";
=> 라이브러리 사용보다는 번거롭다.

import img from './img.jpg';

function App(){
let posts = '맛집 리스트';
function func(){
  return 100
}
.
.
.
<h1> { posts }</h1>
<h1> { func() }</h1>
<img src = { img } />
}
// 변수를 넣기만 하면 적용된다.
// 심지어 클래스이름도 {} 변수로 적용가능하다.

Webpack/Babel로 변환하고 compile하고 어쩌구 과정을
npx create-react-app으로 한방에 해결한다.
React 프레임워크가 쓰이는 이유

react 종료하기
control + C ( command X. control^ O )

react 의 작동원리
index.js -> index.html

react DOM
App.js의 component를 가져와서 보여준다.

React 생활코딩

사용자정의 태그 = component

가독성 업
재사용성 업( 한번정의해놓으면 다른 곳에서 필요할 때 또 갖다 씀)
유지보수 업 (여러 곳에서 쓰였을때 한군데에서만 수정하면 됨)

npm : cmd방식 제어 프로그램..?
npx : 딱 한번만 설치하고 지워버림. 항상 최신상태!.

npm run build
build 폴더 생성. index파일 -> 필요없는 공백, 주석.....다 없애고 생성.
build 디렉토리로 배포하면 보안문제, 메모리 낭비 부분에 있어서 더 나음.

npm으로 설치하는 간단한 서버
npm install -g serve or npx serve : 한 번만 실행시킬 서버

npx serve -s build : serve를 다운받아서 build라는 디렉토리를 루트로 설정하겠다.

-> 그럼 이렇게 서버가 만들어진다.
npm run start 를 하지 않아도 local 주소 혹은 네트워크 주소로 들어가면 build된 화면을 볼 수 있다.

inspect network탭을 확인해보면 1.7MB였던 다운로드 파일 용량이 147KB로 줄어든 것을 볼 수 있다.
이는 build 시 필요없는 것들을 모두 제거했기 때문에 용량이 줄어들었고, 꼭 필요한 파일들만 배포되어 사용자도 더 가벼운 서비스를 사용할 수 있도록 했다.

0. Setting

node.js 설치
editor(ex. vscode), terminal
create apps
coding
vscode, terminal 이용
- 작업할 폴더 생성 후 폴더 열고 terminal open
node.js 설치
- node.js create-react-app 라이브러리를 사용해서 리액트 설치하기 위함
- node.js를 설치하면 npm이라는 툴을 이용할 수 있고(같이 다운로드 됨),
  npm으로 create-react-app을 이용할 수 있다
리액트 프로젝트 생성
- npx create-react-app 프로젝트이름 → enter
- fetch 실행 .... → 설치 완료
- open folder → 프로젝트이름 folder
Live Server처럼 실시간으로 미리보기
- terminal에 npm start or npm run start
App.js에 코딩하기
- react는 JSX를 사용
- App.js의 App()함수에 html처럼 코딩하면 됨
- class이름을 주고 싶으면 className(예약어)로 설정해야 흠

2. Basic Theory

Order

Basic Theory와 동일하지만 노마드는 src/App.js, index.js만 남겨두었다.
npm start 후 console창을 종료하면 서버도 같이 종료되니 주의해야 한다.
새로운 컴포넌트 생성 시, 파일 이름 첫 글자는 대문자로 시작한다.
src/MyComponent.js
컴포넌트 js파일의 가장 처음에 항상 react를 import한다. (JSX파일로 읽기 위함)

import React from "react";

Component

html을 return하는 함수
react는 기본적으로 component와 동작한다. All is component!
react는 component를 사용해 html처럼 작성하려는 경우에 필요하다.
이러한 js와 html의 조합을 JSX라 한다. (react에서 나온 유일한 개념)
- JSX : JS안의 HTML

// index.js
ReactDOM.render(
    <React.StrictMode>
        <App />
    </React.StrictMode>,
    document.getElementById("root")
);
// 여기서 <App/>에 해당하는 부분이 component

// <App/> == App.js
function App() {
    return (
        <div className="App">
            <h1>hi! hello</h1>
        </div>
    );
}

react application은 하나의 component 만 rendering한다.
- 그 하나의 컴포넌트 ==> App.js

// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import MyComponent from "./MyComponent";

ReactDOM.render(
    // <React.StrictMode>
    <App />,
    <MyComponent />,
    // </React.StrictMode>,
    document.getElementById("root")
);

// import MyComponent from "./MyComponent";
// <MyComponent />,
// 이렇게 추가해서 쓸 수 없다. ERROR!

고로, App.js에 import해 App.js에서 한 번에 로드하도록 한다.
- Everything is inside App.js

import React from "react";
import MyComponent from "./MyComponent"; // ./ == same directory

function App() {
    return (
        <div className="App">
            <h1>hi! hello</h1>
            <MyComponent />
        </div>
    );
}

export default App;

State / 변수

(하단 내용 수정/정리 필요)

데이터 바인딩을 위해 사용하는 두 가지 방법

1. 변수에 담기
let posts = "맛집 리스트";

2. state로 담아 호출

    import React, { useState } from "react"; // react의 내장함수

    useState("마포구 맛집 추천");
    /* 이렇게 선언하면 이 자리에 [a, b] 변수가 2개 담은 array가 남는다.
     a == "마포구 맛집 추천"
     b == a를 수정하기 위한 함수 */

    // 새로 추가된 ES6 문법에 따라 아래처럼 사용이 가능하다.
    let [a, b] = [10, 100];
    // ==> let a = 10;
    //     let b = 100;

    // let [a, b] = useState("sth")
    let [title, editTitle] = useState("마포구 맛집 추천");
    let [title2, editTitle2] = useState("마포구 맛집 추천2");
    let [title3, editTitle3] = useState(["마포구", "카페"]);

    return (
        <div className="App">
            <div className="navbar">
                <div>D-Blog</div>
            </div>

            {/* 변수사용 */}
            <div className="list">
                <h3> {posts} </h3>
                <p>7월 24일 발행</p>
                <hr />
            </div>

            {/* state사용 */}
            <div className="list">
                <h3> {title} </h3>
                <p>7월 24일 발행</p>
                <hr />
            </div>
            <div className="list">
                <h3> {title2} </h3>
                <p>7월 24일 발행</p>
                <hr />
            </div>
            <div className="list">
                <h3> {title3} </h3>
                <p>7월 24일 발행</p>
                <hr />
            </div>
            <div className="list">
                <h3> {title3[0]} </h3>
                <p>7월 24일 발행</p>
                <hr />
            </div>
        </div>
    );

State를 쓰는 이유?
웹이 App처럼 동작하게 만들 수 있기 때문
- 변수 : 값이 변경되면 새로고침을 해야 재렌더링이 된다.
- state : 자동으로 재렌더링이 된다. (라이브서버처럼 실시간 변동 확인 가능)
바뀔 일이 거의 없는 데이터는 변수에 담거나 하드 코딩을 해도 괜찮다.
자주 바뀌는 데이터의 경우 state에 저장하는게 용이하다.

CSS 사용

html처럼 <div style="">은 적용이 불가하다. (js문법과 겹칠 수 있기 때문에)
때문에 object 타입으로 써야 한다.

<div 
     style={{ 
     	color: "blue", 
     	fontSize: "30px" }}
></div>

font-size도 js문법에서 -는 연산자이기 때문에 camel case로 씀
{color : 'blue', fontSize : '30px'} 이 자체를 변수에 저장해서 이용하거나
클래스로 저장해서 사용함

참조

생활코딩 - React

Nomad Coders - ReactJS로 영화 웹 서비스 만들기

코딩애플 - 리액트 블로그 프로젝트 만들기

위키백과

KAYA

겅부하자

다음 포스트

[React] React 시작하기

React

리액트 React (React.js 또는 ReactJS)