Library

애플리케이션의 규모가 커지고 다양한 UI, UX를 구현하기 위해 DOM, jQuery로 개발하고 유지보수 하는 것이 어려워졌다.

생상성을 향상시키고 많은 양의 데이터 관리와 코드 유지 보수를 더욱 편리하기 위해 Frontend Framework(=Library)가 등장했다.

React vs Vue vs Angular

• Angular 구글에서 개발한 Framework. TypeScript 기반으로 안정적이고 탄탄하다. -> 무겁고 배우기 어렵다.
• Vue 개인이 개발한 Framework. 코드가 깔끔하고 배우기 쉽다.
• React 페이스북에서 개발한 Library. MVC 프레임워크와 달리, 오로지 view만 담당한다. 내장되어 있는 기능이 부족해 React-router, Redux 라이브러리를 함께 사용한다.

React

사용자 인터페이스(UI)를 구축하기 위한 JS 라이브러리.
가상 돔을 통해 이전 UI 상태를 메모리에 유지하고, 빠르게 업데이트 한다.

개발환경 구축하기

1. Node, npm 설치

• Node.js 자바스크립트가 브라우저 밖(서버)에서도 동작하게 하는 환경.
• npm (= node package manager)

2. CRA Settings

(= Create-Reat-App) 리액트로 웹APP을 만들기 위한 환경을 제공한다.

• npm create-react-app create react app 설치
• npm start 로컬 서버 접속 http://localhost:3000
• ctrl+c npm 종료

3. CRA 기본 폴더 및 파일 구성

• node_modules CRA를 구성하는 모든 패키지 소스 코드

• package.json 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보가 기록되는 파일. 프로젝트마다 하나씩 존재한다.
  -> "dependencies" 리액트를 사용하기 위한 모든 패키지 리스트와 버전을 확인할 수 있다.
  -> 새로운 라이브러리 설치 시 npm install slider —-save 라고 명령해야 dependencies에 추가된다.

• .gitignore push를 해도 githob에 올라가지 않는다.

• public > index.html
  <div id="root"></div>

• src > index.js
  ReacdtDOM.render( <App />, document.getElementById('root'))

• src > App.js
  현재 화면에 보여지고 있는 초기 Component.

4. 기타 폴더 구성

• public > images, data(mock data 관리)
• src > components(Header, Nav, Footer), pages(login.js/main.js), styles(reset.scss/common.scss)

JSX

JavaScript Syntax Extension
리액트에서 사용하는 자바스크립트 확장 문법.
-> 브라우저에서 동작하는 과정에서 일반 자바스크립트 형태의 코드로 변환된다.

1. HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙하다.
2. HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있다.

JSX 특징

• HTML에서 사용하는 class를 className로 대신한다.
• Self-Closing Tag <div /> = <div></div> 내부가 비었을 때
• inline Styling <div style={{color : "red"}}>Hello React</div>
• Nested JSX 항상 하나의 태그로 시작하며, 소괄호로 감싼다.
• React Fragments DOM에 별도의 노트를 추가하지 않고 하나의 컴포넌트 안에 여러 요소들을 간단하게 그룹화 할 수 있다.

const right = (
<div>
    <p>list1</p>
    <p>list2</p>
</div>
);

Component

재사용이 가능한 UI 단위.

1. 동일 코드가 반복되는 부분을 하나의 Component로 만들어 재사용 할 수 있다.
2. 코드 유지보수에 좋다
3. 해당 페이지의 레이아웃을 한 눈에 파악하기 좋다.

Functional Component vs Class Component

component를 선언하는 두 가지 방식

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<Welcome /> // Component 사용

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

Class Component
1. extends React.Component로 생성한다.
2. 반드시 render() 함수를 정의하고 JSX를 반환한다.

• Rendering
  코드가 눈으로 볼 수 있도록 그려지는 것.
  ReactDOM.render(JSX, 요소를 렌더하고 싶은 부모요소)

ReactDOM.render(
  <h1>Hello, world!</h1>, // JSX
  document.getElementById('root') // 부모요소
);

Props & State

• Props (=property) Component를 사용할 때 원하는 attribute를 추가할 수 있도록 parameter처럼 사용하는 것.
• State component 내에서 정의하고 사용한다.

Component Lifecycle

Reference

• Node.js 다운로드
• React 공식문서
• react-lifecycle
• Blog by Yeri