React

3세대 웹이 나오게 된 이유

• 웹의 규모가 커지고 복잡한 애플리케이션을 개발하여 생산성과 유지보수, 많은 데이터 양을 관리하기 위해 Frontend Framwork(Library)가 등장했다.

• Library의 종류

  • Angular
  • Vue
  • React
    • MVC 아키텍쳐와 다르게 리액트는 뷰만 담당하며, 생태계가 활성화되어 있어 리액트를 주로 사용한다.

---

React란?

• 리액트는 UI를 만들기 위한 JS라이브러이이다.
• React의 특징
  • 선언형 프로그래밍
    • "무엇"을 집중하여 프로그래밍을 하는 것
  • Virtual Dom
    • 성능 저하 문제를 해결하기 위해 가상 돔을 사용하여 리플로우와 리페인트의 연산을 최소화
  • Component기반
    • 컴포넌트란 작고 고립된 코드를 사용하여 UI를 구성하는 것으로, 재사용이 가능하며 유지보수 또한 좋음
  • JSX
    • JS확장의 문법이며, JS에서 HTML을 동시에 사용하여 HTML에 JS의 변수들을 바로 사용할 수 있는 템플릿 언어

---

Node.js를 설치하는 이유

• Node.js는 JS가 브라우저 밖에서도 동작하게 해주는 환경을 의미한다.
• Node.js에 포함되어있는 npm(node package manager)를 설치하기 위해 Node.js를 설치하는 것이다.

---

npm(node package manager)이란?

• npm다양한 패키지를 설치하고 버전 관리를 할 수 있다.
• 명령어
  • npm 버전확인: npm -v
  • node 버전확인: node -v

---

CRA(Create React App)

• 리액트 프로젝트를 시작하는데 개발환경을 세팅 해주는 도구이다.
• 처음 시작하는 단계에서 직접 개발환경을 구축하는게 어려워서 만들게 되었다
• CRA 설치법

  // 1. Desktop - wecode 폴더 진입
cd Desktop/wecode

// 2. westagram-react 프로젝트 설치
npx create-react-app westagram-react

// 3. westagram-react 프로젝트 진입
cd westagram-react

// 4. 로컬 서버 띄우기
npm start

---

CRA 기본 폴더 및 파일의 구성

1. node.modules

• CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
  

2. package.json

• 기본 패키지 외 추가로 설치된 라이브러리와 패키지정보가 기록되는 파일
• 모든 프로젝트는 package.json이 하나씩 존재
• "dependecies"는 리액트를 사용하기 위한 모든패키지 리스트와 버전확인이 가능하며, 실제코드는 bode.modules폴더에 존재한다.

  node.modules와 package.json에서 이중으로 패키지를 관리하지 않는다.

  • 실제 작성한 코드와 설치한 패키지는 로컬로만 존재하며, github에 push할때 작성했던 코드와 함께 package.json을 넘긴다. 다른사람이 pull하여 npm install을 하면 package.json에 기록되어있는 패키지의 이름과 버전 정보를 확인하여 자동으로 설치하는데, node.modules는 올리면 안된다. .gitinore파일에 github에 올리고 싶지 않은 폴더와 파일을 작성한다.

• "scripts"
  • start: 개발모드 실행을 위한 명령어(npm run start)
  • build: 배포 모드 실행을 위한 명령어, 서비스 상용화

3. gitinore

• .gitignore파일에 github에 push하고 싶지 않은 폴더와 파일 작성가능

---

4. public -index.html

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

5. src - index.js

• Entry Point
• ReactDOM.render( <App /> , document.getElementById('root'))
  • ReactDOM>render 함수의 인자는 두 개이며 첫번째 인자는 화면에 나타낼 컴포넌트와 두번째 인자는 컴포넌트의 위치이다.

    이름은 함부로 수정하면 안된다!!

6. src - App.js

• 현재 화면에 나타난 초기 컴포넌트
• <Router/>컴포넌트가 최상위 컴포넌트로 위치한다.

---

기타 폴더 구성

public 폴더

• index.html
• images - 이미지 파일 관리
• data - mock data 관리

  public폴더의 역할
  서버와 연결된 특정 url에 접근하면 해당파일의 파일을 요청할 수 있는데 /index.html을 요청하게 된다. 일반적으로 /는 public 폴더를 의미한다. 우리가 CRA을 배포를 했을 때, 실제 서버에 배포되는 폴더가 바로 public폴더이다.

src 폴더

• components 폴더: 공통의 컴포넌트를 관리
• pages 폴더: 페이지 단위의 컴포넌트 폴더로 구성
  • ex) Main: Main.js, Main.scss
• styles 폴더: reset.scss( css초기화 ), common.scss( 공통으로 사용하는 CSS 속성 정의)
  -common 예시: font-family, theme color...

  components파일과 pages파일
  여러 페이지에서 동시에 사용하는 컴포넌트는 components폴더에서 관리하며( ex: Header, Nav, Footer...),
  페이지 컴포넌트의 경우만 pages폴더에서 관리한다.
  해당 페이지 내에서 사용하는 컴포넌트의 경우 해당페이지 폴더 하위에서 관리하면 된다.

---

Component?

• 컴포넌트는 재활용 가능한 UI의 구성 단위다.

Cㅐmponent의 특징

• 재사용이 가능하다.
• 유지보수에 좋다.
• 가독성이 좋다.
• 부모 컴포넌트와 자식컴포넌트를 포함할 수 있다.

Class Component와 Functional Component

• 컴포넌트를 선언하는 방식은 Class Component와 Functional Component가 있다.

Class Component

import React from 'react'

class Component extends React.Component {
  render() {
    return (
      <div>
        <h1>This is Class Component!</h1>
      </div>
    )
  }
}

export default Component

• render함수가 꼭 존재해야하며, JSX을 반환한다.

Functional Component

import React from 'react'

const Component = () => {
  return (
    <div>
      <h1>This is Functional Component!</h1>
    </div>
  )
};

export default Component

• 함수형 컴포넌트는 클래스형 컴포넌트보다 간단하고 단순하지만 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않았다. 그후 리액트이 16.8버전이 나오고 Hook기능이 추가되면서 함수형컴포넌트에서 state를 사용할 수 있게되어 클래스형은 현재 거의 쓰지않게 되었다.

---

JSX(JavaScript Syntax Extension)

• 리액트에서 사용하는 JS의 확장 문법이다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 JS형태의 코드로 변환된다.

JSX 장점

• HTML태그 그대로 사용하여 보기 쉽고 익숙하다.
• HTML태그 사용하는 동시에 JS도 JSX안에서 동작할 수 있다.

JSX 특징

• JS의 표현이며 HTML 태그의 클래스 속성명을 className으로 표기한다.
• 인라인 스타일로 {}를 한번 더 사용한다.
• self closing tag를 사용하여 <div />처럼 바로 태그를 닫을 수 있다.
• 모든 요소를 감싸는 최상위 요소를 사용한다(<></>)

<>
  <div className="loginBtn" onClick={() => console.log("click")}>Login</div>
  <br />
  <div style={{backgroundColor: "grey", height: "10px"}} />
</>