리액트란

리액트란

 리액트는 쉽게 말해서 사용자 인터페이스를 만들기 위한 Javascript 라이브러리다. 그런데 리액트는 사용자 인터페이스를 만드는 여러 라이브러리 중에 하나일 뿐인데 왜 모두 리액트에 열광하는 것일까? 먼저 리액트는 대표적인 SPA(SinglePageApplication)이다. SPA를 처음 접한다면 충격적일 것이다. SPA는 말 그대로 하나의 페이지로 된 어플리케이션이라는 말이다. 즉 HTML 파일이 하나인 어플리케이션이다. 그렇기 때문에 새로고침 현상 즉 깜빡거리는 현상이 없어진다.

 SPA라는 조건 한가지 때문에 리액트를 사용하지는 않는다. 바닐라자바스크립트로 간단한 프로젝트를 만들고 리액트로 프로젝트를 만들어본 사람은 리액트의 편리성과 이점들을 알게된다.

리액트의 특징

1. Virtual Dom 사용

https://www.youtube.com/watch?v=BYbgopx44vo&ab_channel=PurelyFunctionaltvPurelyFunctionaltv 

영상을 먼저 보고 오면 내용을 이해하기 쉽다. html요소에 하나하나씩 접근할때마다 리플로우, 리페인트를 하게 되고 그렇게 되면 비용이 커지고 속도가 느려진다. 이를 막기 위해서 Virtual Dom을 이용한다. 바닐라자바스크립트에서도 Fragment가 생겼고 리플로우, 리페인트를 막기위해 최소로 접근하는 방법을 사용할 수 있다. 하지만 어플리케이션 크기가 커지면 리액트처럼 원하는 부분만 수정하는 것은 정말 어렵다. dom에 접근을 최소화하면서 간단한 투두리스트나 블로그를 바닐라자바스크립트를 이용해서 만들어본 사람들은 리액트가 왜 편한지 왜 배워야 하는지 알게된다.

 

2. 컴포넌트 기반

리액트는 캡슐화된 컴포넌트를 조합해서 UI를 만든다. DOM을 신경쓰지 않아도 되기때문에 바닐라자바스크립트를 이용하는 것 보다 편하고 컴포넌트 기반이라 구조를 파악하기도 쉽다.

 

3. JSX 사용

JSX는 JavascriptXml의 약자이다. 말 그대로 자바스크립트를 xml처럼 사용할 수 있게 해주는 리액트의 문법이다. 이를 사용하면 컴포넌트를 쉽게 구성할 수 있다.

 

4. 이용자 수

이용자가 많다는 것은 엄청난 장점이다. 페이스북에서 만들었기 때문에 국내뿐만 아니라 외국에서도 이용자 수가 많고 커뮤니티도 활성화되있다.

리액트의 단점

1. 리액트는 한번에 모든 내용을 가져오기 때문에 프로젝트가 커지게 되면 시간이 많이 걸린다. => 코드 스플리팅 사용

2. 리액트는 CSR(Client Side Rendering)이다.

이는 장단점이 있는데 로딩이 느린대신 작업이 빠르다. 가장 큰 단점은 검색엔진 문제이다. CSR은 처음에 HTML이 비어있기 때문에 웹 크롤링을 하지 못한다.

=> 구글은 CSR을 크롤링할 수 있고 앞으로 다른 사이트들도 가능해질 것이다. + 리액트는 SSR(Server Side Rendering)을 지원한다.

with 리액트

리액트는 컴포넌트를 이용해서 페이지를 구성한다. 복잡한 트리구조에서 임의의 a컴포넌트에서 b컴포넌트로 데이터를 전달하고 싶다면 문제가 생긴다. 이때 해결하는 방법으로 자체적인 리액트의 context가 있다. 이것이만으로 부족하다고 생각할 때 사용하는 것이 redux다. context를 사용하다보면 그 중간에 작업이 필요한 경우가 있다. 이럴때 리덕스의 미들웨어를 활용한다. 또 context를 사용하다가 프로젝트가 커지면 제어하기가 버거워진다. 이럴때 리덕스를 사용하면 유용한 함수들도 있고 최적화도 쉽게 할 수 있다.