노트 #40 | React - 리액트란?

들어가며

부트캠프 한달차 넘어가는 이 시점에서 드디어 리액트에 들어왔네요. 리액트도 부트캠프 전에 공부했었고 좋은 라이브러리라고 느껴졌지만 이론이나 숙련도가 너무 부족했는데 이번 계기로 이론과 숙련도가 탄탄하게 성장하도록 하겠습니다.

개요

리액트는 컴포넌트 단위로나누어 생각하고 개발하는 방법을 배웁니다.

학습 목표

• React의 3가지 특징에 대해서 이해하고, 설명할 수 있다.

리액트 기초

리액트 정의

• 프론트엔드 개발을 위한 JavaScript 오픈소스 라이브러리

리액트의 3가지 특징

• 선언형
• 컴포넌트 기반
• 범용성

선언형이란? (Declarativ)

• 파일을 명시적으로 작성할 수 있게 JSX를 활용한 선언형 프로그래밍 지향 ✅
  • 한 페이지를 보여주기 위해 HTML/ CSS / JS 나눠적을 필요 ❌
• 여러 컴포넌트들을 한곳에 모아볼수 있어서 코드를 보고 실제 동작 상상 가능 ✅

컴포넌트 기반이란? (Component-Based)

• 컴포넌트 : 하나의 기능 구현을 위해 여러 종류의 코드를 묶어둔 것
• 컴포넌트로 분리하면 서로 독립적이고 재사용 가능 합니다.
  • 기능 개발(작동) 자체에 집중해서 개발할 수 있습니다
  • 유지보수 및 유닛 테스트에 유리합니다.

범용성이란? (Learn Once, Write Anywhere)

• JavaScript 프로젝트 어디에든 유연하게 적용될 수 있습니다.
  • 프레임워크(Angular) 는 생태계 종속, 라이브러리(React) 기존 프로젝트에도 유연하게 사용 가능
  • META(전 Facebook) 에서 관리되어 안정적이고, 가장 유명하며, 리액트 네이티브로 모바일 개발도 가능합니다.

정리

• 리액트는 라이브러리
• 리액트의 3가지 특징
  • 선언형(JSX)
  • 컴포넌트 기반(기능 작동 자체 집중, 유지보수 및 테스트 유리)
  • 범용성(다양한 곳에서 사용가능, 기존 프로젝트와 모바일 앱)

참조

코드스테이츠 프론트엔드 부트캠프