[React] React?

Why React?

• 2013년 Facebook에서 개발한 JavaScript Library
• “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것"을 목푤로 개발
• Angular, Vue 등의 다른 프레임워크와는 달리 리액트는 오로지 View만 담당하는 라이브러리
• 그만큼 내장되어 있는 기능이 부족해 third-party 라이브러리 (ex. react-router-dom, redux)를 함께 사용한다
• 자기만의 문법을 가진 Angular, Vue와 달리 자바스크립트 문법을 그대로 사용
• 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음
• 많은 사용자수를 기반으로 생태계가 활성화 되어있음
• 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음
• React Navtive 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능

React

React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리, 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점, 선언적인 개발이 가능하게 되며 UI를 자동으로 업데이트 하는 과정에서 Virtual DOM을 통해서 최적화를 구현한다

CRA (Create-React-App)

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

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

node_modules

• npm으로 다운로드 받은 모든 패키지들이 저장되어 있는 폴더
• gitignore 등록되어 있는 이유는 패키들의 모든 소스코드를 깃에 올리고 관리하게 되면 용량이 너무 커지기 때문이다

package.json

• 우리 프로젝트에 대한 정보들이 기입된 파일
• script : 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
• dependency : 프로젝트에서 의존하고 있는 / 필요로 하는 다른 패키지들에 대한 정보가 있는 곳

.gitignore

• git 으로 관리하지 않을 파일 도는 폴더등을 기입해두는 파일

index.html

• html의 엔트리 포인트
• 사용자가 우리 프로젝트를 요청하며 최초로 보여지는 HTML

index.js

• javascript의 엔트리 포인트
• html과 react 컴포넌트를 연결해주는 역할을 함, 중간다리

app.js

• 실제 화면에 보여지고 있는 컴포넌트

JSX (JavaScript Syntax Extension)

• JavaScript와 HTML을 합쳐놓은 듯한 형태
• 마크업을 편리하게 작성하기 위한 문법
• JSX로 작성한 코드는 자바스크립트가 인식할 수없는 문법이기에 Babel이라는 패키지를 이용해서 변환해줘야 함

<div>Hello World</h1> => React.createElement('div', null, "Hello World")

장점

• HTML tag를 그대로 사용하기 때문에 익숙하다
• HTML마크업과 JavaScript 로직을 같이 구현할 수 있다
• JavaScript 문법을 이용해서 HTML을 생성할 수 있다 (별도의 HTML 파일이 필요하지 X)

특징

• 하나의 부모태그 (반드시 하나의 단일태그로 감싸져 있어야 된다)
• 모든 태그가 셀프 클로징 기능이 있다
• camelCase Property
• JavaScript 동작 기능

JSX element

• HTML문법을 JavaScript 코드 내부에 써주는게 JSX! 변쉐 저장할 수도 있고 함수의 인자로 넘길 수도 있다

const hi = <p>Hi</p>;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li>programming</li>};

JSX attribute

• 태그에 attribute(속성)을 주고 싶을 때는 항상 “” 쌍따움표로 감싸줘야 한다. attribute를 추가하고 싶을 때는 실제 HTML에서 쓰는 attribute name(속성명)과는 다를 수 있다
• 예를 들어, class를 주고 싶을 때 원래 속성명은 class이지만 JSX에서는 className을 사용해야 한다

const hi = <input readOnly={true} />;

const myFavorite = {
    food: <li>샐러드</li>,
    animal: <li>dog</li>,
    hobby: <li className="list-item">programming</li>};

Self-Closing Tag

• JSX에서는 어떤 태그라도 self closing tag가 항상 가능하다. <input> 과 같이 하나의 태그가 요소인 경우에는 <input />와 같이 항상 / 으로 끝내줘야 한다
• <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

• HTML(element), 또는 React 요소 등의 코드가 눈으로 볼 수 있도록 그려지는 것을 렌더링 (rendering)이라고 한다
• React 요소가 DOM node에 추가되어 화면에 렌더링되려면 ReactDom.render 함수를 사용한다. 첫 번째 인자에는 JSX로 React 요소를 인자로 넘기고, 두 번째 인자는 해당 요소를 렌더하고 싶은 container(부모요소)를 전달한다

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);