Why react ?

프레임워크와 라이브러리란?

Framework ( angular / vue )

• 다른사람이 만든 틀 안으로 내가 들어가서 작업
• 제공된 도구들만 활용이 가능하다.

Library ( react )

• 내 작업에 다른 사람이 만들어 둔 코드를 가지고 와서 작업.
• 원하는 도구들을 구성해서 사용한다.

둘의 공통점 : 다른 사람이 만들어 둔 코드.

Angular (- framework)

• TypeScript 기반으로 안정적이고 잘 설계된 구조.

• framework답게 다양한 기능 내장.

• 무겁고 배우기 어렵다는 단점.

Vue (- framework)

vue만의 문법과 규칙.
Framework 답게 다양한 기능이 내장.
러닝커브가 낮다.

React (- library)

Facebook에서 개발.

지속적으로 데이터가 변화하는 대규모 어플리케이션을 구축하는것 을 목표로 개발.

다른 프레임워크와 다르게 오직 View만 담당하는 라이브러리.

내장 기능이 부족하기 때문에 react-router-dom , derux 등을 함께 사용.

자바스크립트 문법을 그대로 사용.

오픈소스 프로젝트이면서 지속적인 관리가 이루어짐.

많은 사용자 수. → 생태계의 활성화

컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있다.

React Native 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능.

What is react ?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

UI를 자동으로 업데이트 해주고 선언적인 개발이 가능하게 됨.
→ 선언적인 개발 : 무엇을 원하는지에 집중되어있다.

UI를 자동으로 업데이트 하는 과정에서 Virtual Dom을 통해 최적화해서 구현.

Virtual Dom

DOM 조작 → Layout → Paint

DOM 조작 브라우저화면의 변화를 주기위한 조작 → 배치 + 색

리액트는 Browser DOM이 매번 화면의 레이아웃을 변경하고 다시 그려주는 비효율적인 과정을 Virtual DOM , 즉 가상의 돔을 이용하여 필요한 부분의 계산을 처리한 후 실제로는 한번만 그려줄 수 있도록 한다.

Node & NPM

Node
→ 자바스크립트 실행환경,
→ 자바스크립트를 해석하고 실행할 수 있는 도구.
→ Browser 도 자바스크립트의 실행환경이다.

자바스크립트가 웹 밖에서도 실행되길 원하는 필요성이 생겼고 이에 따라 node가 개발됨.

노드를 알아야하는 이유 : 리액트를 사용해 프로그래밍 시 , 실제 웹브라우저가 아닌 자신의 컴퓨터 내에서 작업을 하게 된다. 이에 따라 다양한 패키지들이 필요하고 요구된다. 이러한 모든 패키지들을 원하는대로 동작시키고 사용하기 위해서는 각자의 컴퓨터 내에서 자바스크립트를 실행할 수 있도록 하기 위해서.

Node Package Manager
→ package : 실행할 수 있는 하나하나의 프로그램
→ 노드를 실행할 수 있는 여러 패키지들을 다운로드 받고 업데이트하고 삭제하는 등의 매니저 역할.

CRA ( Create - react - app )

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain)

• 리액트는 UI기능만 제공. 따라서 개발자가 직접 구축해야하는 것들이 많다.
• 처음 시작하는 단계에서는 직접 개발 환경을 구축하는데에 어려움이 있음.
• CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공.
• CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능.

node_modules
: npm으로 다운받은 패키지들이 저장되어 있는 폴더.

pakage.json
: 우리 프로젝트에 대한 정보들이 기입된 파일.
: script 항목 - 프로젝트에서 실행가능한 명령어들의 항목.
→ start의 경우 자주 사용하기 때문에 npm start 라고 터미널에서 실행시켜주지만 이외의 다른 항목들은 npm run build , npm run test 등으로 실행시켜주어야한다.
: dependencies 항목 - 프로젝트에서 의존하고 있는 다른 여러가지 패키지들을 기입해두는 항목.

gitignore : 깃으로 관리하지 않은 항목들을 모아둔 파일 git push로 git에 올라가지 않는다. node_modules 가 포함되어있다. 깃으로 관리하기엔 너무 크다. 하지만 이 파일이 없는 경우 npm start 해주어도 제대로 동작하지 않는다.
git 에서 clone 후 터미널에서 npm install 이라는 명령어를 치면 npm이 알아서 dependencies 항목을 읽고 그에 따라 필요한 것들을 다운로드해준다.

---

JSX ( javascript syntax extension )

element :

: HTML 문법을 JS 코드 내부에 써주면 jsx. 변수에 저장할 수 있고 함수의 인자로 넘길 수 있다.

attribute :

"" 쌍따옴표로 감싸준다. attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과 다를 수 있다.

ex) class ⇒ className

<div tabIndex={-1} />      // Just like node.tabIndex DOM API
<div className="Button" /> // Just like node.className DOM API
<input readOnly={true} />  // Just like node.readOnly DOM API

Self - Closing Tag

<div />  === <div></div>

Nested JSX

(필수) 소괄호로 감싸기

const good = (
<div>
    <p>hi</p>
</div>);

중첩된 요소를 만들려면 () 소괄호로 감싸주기.

(필수) 항상 하나의 태그로 시작

const wrong = (
<p>list1</p><p>list2</p>);

위와 같이 제일 처음 요소가 sibling이면 안된다. 무조건 하나의 태그로 감싸져야 함. 아래의 코드처럼 첫 요소는 하나의 태그로 감싸줘야함.

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

Rendering

rendering: html 요소 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것.

ReactDOM.render : React 요소가 DOM node 에 추가되어 화면에 렌더시킬 때 사용하는 함수.

Syntax - render ( )

ReactDOM.render(element, container[,callback])

React 엘리먼트를 container DOM에 렌더링 하고 컴포넌트에 대한 참조를 반환한다.

param 1 : JSX로 React 요소를 인자로 넘긴다.

param 2: 해당 요소를 렌더링 하고 싶은 container(부모요소)를 전달.

---

Component , Props

Component : 재사용 가능한 UI 단위.

✅ 독립적으로 재사용가능한 코드로 관리할 수 있음.

React 컴포넌트에서는 input 을 props 라고 말하고 return은 화면에 보여져야할 React 요소가 return 된다.

props

컴포넌트를 사용하는 부모쪽에서 전달해야만 사용할 수 있다. (함수의 parameter처럼 ...)

읽기전용 값으로 변경하면 안된다.

state

컴포넌트의 상태 값.

컴포넌트 내에서 정의하고 사용하며 업데이트가 가능한 값.