리액트란 무엇인가?

ssssm·2023년 3월 12일

📌리액트란 무엇인가?

리액트란?

유저 인터페이스를 만들기 위한 자바스크립트 라이브러리이다. facebook에서 제공하는 라이브러리로서 주로 SPA(Single Page Application)을 만들 때 사용한다. 컴포넌트를 마치 레고 조립하듯이 떼었다 붙였다 하면서 유지 보수 시에 편리하다는 장점이 있다. React를 사용하면 페이지 전체를 렌더링 하지 않고 원하는 부분만 효율적으로 렌더링이 가능하다.

등장 배경(JQuery --> React)

리액트가 등장하기 이전에도 많은 라이브러리와 프레임워크가 존재했다고 한다. 그중 jQuary 경우, 여러 브라우저들마다 JS를 불러오는 방식이 달라 어려웠던 점을 해결해 주었다. 특히 DOM을 쉽게 다룰 수 있는 점과 jQuery를 기반으로 다양한 라이브러리를 사용할 수 있는 점들이 가장 큰 장점이었다.

하지만 시간이 흐르면서 Web App 크기가 커지고, JS 파일이 넘쳐나면서 통제가 어려워졌다. 그래서 컴포넌트 재사용이 가능하면서, DOM을 직접 조작하지 않고 Vertual DOM을 이용이 가능한 장점을 가진 React 라이브러리를 사용하게 됐다. 리액트는 HTML파일 1개만 사용하고 다른 페이지를 나타내고 싶을 때 그 부분만 바꿔서 보여주게 된다. 그래서 부드럽게 동작하는 것처럼 보이고 트래픽 총량을 줄이고, 속도를 향상시켜주는 장점이 있다.

리액트의 발전 과정

2013년 3월: 오픈소스 공개

2015년 3월: React Native

2019년 2월: 함수형 컴포넌트 (Hooks) v16.8

2022년 3월: SSR+

✏️ React Native란?

리액트 네이티브는 IOS와 안드로이드에서 동작하는 네이티브 모바일 앱을 만드는 자바스크립트 프레임워크이다.

✏️ SSR란?

SSR은 Server Side Rendering 약자이다. 처음 클라이언트가 접속했을때 브라우저에서 자바스크립트 코드를 다운로드 받아 해석 할 때까지 기다리지 않고 서버에서 보여질 HTML을 미리 준비해 클라이언트한테 응답해주는 방식이다.

리액트의 중요한 특징 / 사용하는 이유?

Virtual DOM 사용
- DOM을 직접 제어하지 않고 가상 DOM이 변경될 떄, 실제 DOM이 변경되도록 설계되어 있다. 이러한 부분이 비효율적인 렌더링을 최소하 하기위해 만들어졌다. 하지만 무조건 좋고 빠르다는 것은 아니다.
- 예를 들어 게임 캐릭터의 레벨업 상황으로 설명하겠다. 레벨업 후 여러 스텟중 힘 스텟을 클릭하면, 힘 스텟이 올라가면서 전체 전투력도 같이 올라간다. 이 때, Virtual DOM이 없는 경우 두 번의 렌더링이 발생하게 된다, 하지만 리액트에선 모든 과정을 가상 돔에서 수행한 후 결과를 브라우저에 전달한다.
컴포넌트 단위 개발
- 컴포넌트는 레고처럼 마치 조립하듯 개발 가능하다. 컴포넌트 단위로 개발하면 가독성이 좋아 보이고 확장성, 결합성, 재사용성 등 유지 보수 시 유리한점이 많다.
- Class Component : 초창기에 많이 사용하던 형태로 함수형에 비해 문법과 사용법이 복잡하지만, 작성 되어있는 기존 코드가 많이 남아있기 때문에 해석할 수 있어야 한다.
- Function Component : 클래스형 컴포넌트에 비해 단순하다. hooks라는 기능이 추가되면서 state를 잘 관리할 수있게 되어서 자주 사용한다.

function Name() {
    return(
        <>
            <h1>Min</h1>;
        </>
    );
}
function Job() {
    return(
        <>
            <h1>프론트엔드 개발자</h1>;
        </>
    );
}
function App() {
    return(
        <>
            <Name />
            <Job />
        </>
    );
}