TIL #23 - React 시작하기

Sarang Lee·2021년 1월 27일

React

목록 보기

1/9

React란?

리액트란 UI를 재사용하기 위해 2013년 Facebook에서 개발한 Javascript 기반 라이브러리이다.

이전의 VanillaJS에서 페이지별로 HTML, CSS, JS 파일을 각각 따로 관리하며 DOM을 이용해 기능을 일일이 구현해야 했다면, 리액트는 다양한 화면에서 사용할 수 있는 UI를 Component 단위로 나누어 한번에 관리한다. 그리고 가상 돔 (Virtual Dom)을 이용해 이전 상태의 UI를 메모리에 저장하여 변경된 최소한의 UI만 렌더시켜주어 성능 또한 개선시켜준다.

처음에 리액트를 배울 때 어렵게 느껴질 수 있지만, 많은 페이지에서 다양한 UI가 나올수록 리액트가 얼마나 생산성을 높여주는 라이브러리인지 알 수 있다.

Front-end Framework/Library 삼대장

Angular
Vue
React

앵귤러, 뷰와 다르게 리액트는 Model, View, Controller(MVC) 중 View만 담당하기 때문에 내장되어 있는 기능이 부족해 third-party 라이브러리(React-rouster, Redux 등)를 함께 사용한다.

리액트는 페이스북의 지속적인 관리와 함께 생태계가 활성화되어 있어 방대한 자료들을 활용할 수 있다. 또한 React Native를 이용해 어플리케이션도 제작 가능하기 때문에 사용자가 꾸준히 증가하는 추세이다.

Component & JSX

Component

Component의 특징

UI 재사용이 가능하다.
HTML + CSS + JS를 한번에 묶어 관리하기 때문에 유지 보수하기 수월하다.
페이지 구성 요소 파악이 용이하다.
컴포넌트를 중첩해서 사용이 가능하다.
<컴포넌트명 /> 형식으로 쓰인다.

선언 방식

Classg형 컴포넌트 - render 함수가 필수이며 그 안에 보여 주어야 할 jsx를 반환한다.

class 컴포넌트명 extends React.Component {
  render() {
    return(
      <div>
      </div>
    );
  }
}

함수형 컴포넌트

const 컴포넌트명 = () => {
  return (
    <div>
    </div>
  )
};

JSX (JavaScript XML)

JavaScript 확장판으로, JS 코드 안에 HTML 문법을 작성할 수 있는 문법이다. JSX 문법을 그대로 쓰는 경우 브라우저가 인식할 수 없기 때문에 바벨과 같은 컴파일러로 코드를 변환시켜주어야 한다.

JSX의 특징

자바스크립트 표현은 {} 중괄호로 감싸준다.
JSX는 속성의 속성 값을 ""로 감싸주어야 하며 속성명이 html과 다를 수 있어 확인해야 한다.
ex) class -> className
어떤 태그라도 self colsing tag가 가능하다. 닫는 태그가 없는 태그의 경우 무조건 태그 내부에 <img />와 같이 /로 닫아주어야 한다.
부모 자식 관계로 중첩된 요소를 만들 경우 () 소괄호로 감싸준다.
태그가 여러 개일 경우(sibling) 하나의 태그로 태그들을 감싸준다. (React Fragments : <> ... </>)
ReactDom.render (렌더할 컴포넌트명, 렌더할 위치);
HTML 요소가 보여질 수 있도록 렌더되려면 ReactDom.render() 함수를 사용하여야 한다.

React 작업 환경 설정

Node.js & npm (Node Package Manager)

리액트로 프로젝트를 개발하는 데 필요한 프로그램들(바벨, 웹팩 등)이 Node.js 기반이기 때문에 리액트 사용 전 필수로 설치해야 한다.

CRA (Create-React-App)

리액트 팀에서 개발한 리액트 개발 환경 세팅을 도와주는 도구이다. npx create-react-app 명령어만으로 CRA 설치가 가능하며 개발 환경을 자동으로 세팅해주어 편리하다.

npx create-react-app projectFolderName - 프로젝트 폴더에 개발 환경 세팅
node_modules, public, src 등의 파일으로 이루어져 있다.
- node.modules - CRA의 패키지 폴더. 양이 많고 무겁다.
- package.json - 추가로 설치된 라이브러리나 패키지의 이름과 버전 등이 기록되는 파일. --save 문구를 추가하여 패키지를 설치하면 package.json 파일에 자동 입력된다. 이후 협업 시 같은 개발 환경 세팅을 위해 terminal에 npm install을 입력하면 package.json의 dependencies 객체 내용을 쭉 훑으며 해당 버전의 패키지를 같이 설치해준다.
- .gitignore - node.modules와 같이 무거운 파일들을 작성하여 git에 올리지 않도록 설정할 수 있다.