[React] React 기초 이해하기 1

<React(리액트)란>

- React는 사용자 인터페이스를 구축하는 JS라이브러리

- 페이지를 재로드하지 않고 데이터를 변경할 수 있도록 가상 돔을 사용하여 웹의 퍼포먼스를 최적화한 라이브러리

- React는 컴포넌트가 전부라고 할 수 있음

 

<React(리액트)의 장단점>

1. 장점

- React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있음

- Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리함 (이게 view 역할을 담당)

- 성능이 뛰어난 가비지 컬랙터, 메모리 관리 기능을 지원함

- UI 수정과 재사용성이 좋으며, 코드 가독성을 높일 수 있음

- 다른 framework나 라이브러리와 병행해서 사용할 수 있으며 재사용이 가능함

 

2. 단점

- IE8 이하 버전은 지원하지 않음

- view 이외의 기능은 직접 구현하거나 라이브러리를 사용해서 구현해야 하기에 javascript 배경지식이 필수 선행이 필요

- 데이터 모델링, 라우팅, Ajax 등 기능 지원이 안됨

- (치명적) 로딩시간이 김

- 웹의 궁극적 지향점과는 다소 동떨어져있음

 

<React(리액트) 특징>

1. 선언적

-> 리액트는 대화형 UI를 작성하기 유리해 데이터가 변경되었을 때 효율적으로 렌더링을 수행할 수 있음

2. 컴포넌트 기반

-> 캡슐화된 컴포넌트가 스스로 생태를 관리하고 복잡한 UI도 효과적으로 구성이 가능하며 여러 화면에서 사용될 수 있으므로, 재사용성을 가지고 있음

 

<Component란>

- 웹 페이지 안에서 화면을 이루는 작은 요소들이라고 생각하면 됨

- 컴포턴트는 여러 화면에서 사용이 가능해서 재사용성을 가지고 있음 

- 컴포넌트는 클래스형과 함수형으로 나눠짐

  클래스형 :

  - class로 정의하고 Component로 상속을 받아야 함

  - render()함수에서 jsx코드를 반환하며 프로퍼티, state와 함수등을 포함

import React, {Component} from 'react';

class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">
    <h2> 클래스형 컴포넌트 기본구조 </h2>
    </div>
  }
}

export default App;

  함수형 :

  - function으로 정의하고 retrun문에 jsx코드를 반환

  - function을 사용하지 않고, 화살표 함수로도 정의 가능

import React from "react";

function App() {
  return (
  <div className = "react">
  	<h2>함수형 컴포넌트 기본 구조</h2>
    </div>
}

export default App;

 

📕출처 : https://velog.io/@jeromecheon/React%EB%9E%80-%ED%8A%B9%EC%A7%95%EA%B3%BC-%EC%9E%A5%EB%8B%A8%EC%A0%90-%ED%8C%8C%ED%97%A4%EC%B9%98%EA%B8%B0