[TIL] React의 시작

3주차부터는 본격적인 프로그래밍을 위해 리액트를 배우기 시작했다.

React?

React는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리다. 리액트와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점이다. 리액트는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트한다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

Component

리액트는 컴포넌트라는 것이 있는데, 재사용이 가능한 특정 엘리먼트? 단위라고 보면 될것 같다.
앞서 만든 westagram 같은 경우 nav와 feed 같은 것을 컴포넌트 단위로 나누어 재 사용할수가 있겠다.
컴포넌트를 사용하면 메인페이지 같은 경우 한곳에 모든 엘리먼트를 몰아넣는게 아닌

위처럼 commentList, RecommendList, StoryList같이 세분화시켜 특정 부분만 수정할 일이 있을 때 해당 컴포넌트에 들어가서 필요한 부분만 수정하면 되므로 유지보수에도 용이하다.

Class & Functional

Component는 클래스와 함수형으로 나뉘는 데, 각각의 특징이 있다.

import React from "react";

class Test extends from React.Component {
  render() {
    return <div></div>;
  }
}

클래스형 컴포넌트는 위와 같이 render 함수가 꼭 있어야하고 return으로는 보여줄 jsx를 반환한다.

import React from "react";

const test = () => {
  return (
    <div>HI</div>
  )
}

함수형 컴포넌트는 자바스크립트에서 일반적으로 함수를 선언할 때처럼 선언을 해서 사용한다.

JSX

JSX는 Javascript Syntax Extension이고 말그대로 자바스크립트 확장 문법이다.

장점

class Test extends React.Component {
  render() {
    return <div></div>;
  }
}

위에서 볼수 있다시피 jsx는 innerHTML이라던지 textContent라던지 직접 주입시켜주는 함수를 사용하는 것이 아닌 엘리먼트를 기존 html처럼 구성하여 리턴하기 때문에 보기 쉽고 익숙하다.

특징

class Test extends React.Component {
  render() {
    return (
      <div>Test</div>
      <div>1234</div>
    )
  }
}

위와 같은 jsx를 리턴하면 리액트는 어떤 반응을 할까?? 바로 에러를 내뿜는다.
그 이유는 jsx 요소를 여러개 리턴할 때는 해당 요소를 감싸는 하나의 부모 엘리먼트가 무조건 하나 있어야 한다. 위와 같은 경우를 수정하기 위해서 아래처럼 해주면 된다

class Test extends React.Component {
  render() {
    return (
      <div>
        <div>Test</div>
        <div>1234</div>
      </div>
    )
  }
}

하지만 내가 div로 감싸고 싶지 않다면 어떻게 해야할까? 그럴때 제공해주는 것이 있다

class Test extends React.Component {
  render() {
    return (
      <>
        <div>Test</div>
        <div>1234</div>
      </>
    )
  }
}

바로 저렇게 빈 태그로 감싸줘도 전혀 문제가 발생하지 않는다. 저것을 Fragments라고 하는데 DOM에 별도의 노드를 추가하지 않고 하나의 컴포넌트 안에 여러 엘리먼트들을 간단하게 그룹화 할수 있는 기능이다.