[React] 1. Intro

ShiHoon Yoon·2020년 8월 31일
0

1. What is React

사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트.

2. CRA (Create-React-App)

CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공한다. CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축

JavaScript build Toolchain 요소

Package manager

Yarn or npm. It lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.

Bundler

webpack or Parcel. It lets you write modular code and bundle it together into small packages to optimize load time.

Compiler

Babel. It lets you write modern JavaScript code that still works in older browsers.

index.html

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

3-1 index.js

React의 시작 (Entry Point)

  • ReactDOM.render( <App /> , document.getElementById('root'))
    • ReactDOM.render 함수의 인자는 두 개
    • 첫 번째 인자는 화면에 보여주고 싶은 컴포넌트
    • 두 번째 인자는 화면에 보여주고 싶은 컴포넌트의 위치

3-2 App.js

  • 현재 화면에 보여지고 있는 초기 컴포넌트
  • Westagram 작업 시 <Login /> 컴포넌트, <Main /> 컴포넌트를 그 자리에 대체하여 작업하면 된다.
  • React Router 를 배운 후에는 <Routes /> 컴포넌트가 최상위 컴포넌트로 그 자리에 위치하게 된다.

4 Component

Nav 컴포넌트와 Main 컴포넌트, 그리고 Main 컴포넌트 안에는 Feed 컴포넌트와 MainRight 컴포넌트로 나눌 수 있음.

특징

  • 재활용하여 사용할 수 있다.
  • 코드 유지보수에 좋다.
  • 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
  • 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

Type of Component

1) Class Component

import React, { Component } from 'react';

export class ReactComponent extends Component {
  render() {
    return <div>This is Class Component!</div>;
  }
}

export default ReactComponent;

클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환해야 함.

2) Functional Component

import React from 'react';

const ReactComponent = () => {
  return <div>This is functional component</div>;
};

export default ReactComponent;
  • 함수형 컴포넌트가 보기에는 훨씬 간단하고 작성하기 편리한 장점.

5. JSX

정의

  • JSX란 리액트에서 사용하는 자바스크립트 확장 문법
  • JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환

장점

  • HTML 태그를 그대로 사용하기 때문에 보기 쉽고 익숙.
  • HTML 태그를 사용하는 동시에 자바스크립트도 JSX 안에서 동작하게 할 수 있음.
  • vs. DOM + Event
profile
Entrepreneurs Should Learn to Code

0개의 댓글