React | What is React?

dev_bomdong·2021년 8월 21일
1

React

목록 보기
1/8
post-thumbnail

Why React?

웹의 규모가 커지면서 동시접속자 수와 데이터의 양이 폭발적으로 증가했고, 이 결과로 웹 3세대의 시대가 도래하게 된다. 이러한 흐름속에서 기존의 DOM, jQuery만으로는 새로운 웹 애플리케이션을 개발하고 코드를 유지보수 하는 것이 어려워졌다.

규모가 커지고 복잡해진 웹 애플리케이션의 데이터 관리 / 코드 유지 보수를 편리하게 하기 위해 다양한 Frontend Framework 및 Library가 등장한다. React는 이 중 Frontend Library에 해당한다.


What is React ?

  • 사용자 인터페이스(UI)를 만들기 위한 JS 라이브러리
  • 컴포넌트 단위로 이루어진 UI 라이브러리

위 단어에서 생소하게 느껴졌던 단어, 라이브러리와 컴포넌트
아래로 각각 정리해본다.


프레임워크 vs 라이브러리

프레임워크

  • 다른 사람들이 만들어놓은 코드 안에 내가 들어가는 것
  • 집의 구조/철제물이 완성된 완성품
  • 다양한 기능들이 한 번에 묶어져서 제공이 되므로 정해진 골격 안에서 원하는 기능을 구현해야 함
  • 배우는 데 시간이 오래 걸림
  • ex. 앵귤러

라이브러리

  • 다른 사람들이 만들어놓은 것을 내가 가져와서 쓰는 것
  • 우리가 원하는 재료들을 골라서 입맛에 맞게 집을 지을 수 있음.
  • 작은 단위, 작은 도메인 안에서 자신의 원하는 작은 부분을 구현. 따로 정해진 골격이 없다.
  • 배우는 시간이 상대적으로 짧다.
  • ex. 리액트

Component

한 가지의 기능을 수행하는 UI 단위

구조

  • 데이터를 가진 state
  • 사용자에게 어떻게 보여줄 지를 결정하는 render 함수
    (상태가 변할 때마다 render 함수가 호출된다.)

특징

  • 독립적이고 재사용이 가능하다.
  • 최상위의 컴포넌트 : Root
  • 리액트 내부에 가상돔(Vitrual Dom)이 있어 UI를 빠르게 업데이트한다.
    가상돔(Virtual Dom)
    : 이전 UI상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술

JSX

리액트에서 사용하는 자바스크립트 확장 문법

특징

  • HTML마크업 + JS로직구현을 함께 할 수 있다.
  • 하나의 부모 태그가 필요하다.
  • Self closing가능
  • camelCase property (ex.className)

사용법

  • JS코드를 기재할 땐 겉에 {}로 감싸주어야 한다.
  • JSX 안에서 컴포넌트를 표시할 땐 대문자로 시작하게 적어야한다.

Settings

Node.js

JS가 브라우저 밖에서도 동작하게 하는 실행환경

npm

package : node로 실행할 수 있는 어플리케이션

CRA

리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅해주는 도구(toolchain)
여러 파일이 생성되는데, 그 중 특히 생소했던 파일 몇 개를 추려서 정리해본다.

  • node.modules

    : CRA를 구성하는 모든 패키지 소스 코드

  • package.json

    : 프로젝트에 대한 정보를 담고 있는 파일

    'dependency : 패키지 이름/버전' 이 중요

  • gitignore

    : git에 올리고 싶지 않은 파일


본격적으로 React 공부를 시작하기 전에 그래서 이게 왜 쓰이기 시작한 건지, 어떤 특징을 가지고 있는지 알고 시작하는 것이 중요하다고 생각했다. 간단히나마 개념을 정리해보았으니 이젠 기쁜 마음으로 React에 발을 푹 담구어 보자 🎉

profile
블로그 이사중입니다 https://dev-bomdong.tistory.com/

2개의 댓글

comment-user-thumbnail
2021년 8월 21일

리액트와 어서 친해지고 싶은 마음이에요 🥲
3주차에는 눈인사 정도만 나눈 것 같은데...
4주차에는 악수 정도는 가능하겠죠?
정리해주신 글 잘 봤습니다! 앞으로도 화이팅!

1개의 답글