리액트란 무엇인가요?
리액트는 유저 인터페이스를 만들기 위한 자바스크립트 기반의 라이브러리입니다. 주로 SPA을 만들 때 사용되며 이러한 리액트는 컴포넌트의 모음이라고 말할 수 있습니다.
리액트를 사용하는 이유는 무엇인가요?
제가 리액트를 사용하는 이유는 가상돔을 사용해서 효율성을 높이고 컴포넌트를 통한 코드의 재사용률을 높일 수 있습니다. 또한 JSX 문법으로 자바스크립트 코드를 훨씬 간편하게 사용할 수 있습니다. 다른 프레임워크 / 라이브러리가 있지만 리액트는 사용자가 가장 많은만큼 인터넷에서 많은 정보를 찾을 수 있는 장점도 있습니다. 이러한 점들 때문에 리액트를 사용하고 있습니다.
SPA은 무엇인가요?
SPA는 Single Page Application의 약자이며, 서버로부터 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성하는 Application을 말합니다. 전체 페이지를 렌더링 하지 않고, 바뀐 부분만 렌더링 하기 때문에 효율적이라고 할 수 있습니다. 또한 새로고침하지 않기 때문에 사용자에게 좀 더 데스크톱 애플리케이션을 사용하는 기분이 들게 해 줍니다.
SPA는 초기에 정적 리소스를 한 번에 가져오기 때문에 초기 로딩 속도는 더 느릴 수 있습니다. 하지만, SPA 기반의 서비스는 대체적으로 웹 페이지보단 애플리케이션 서비스에 가깝기 때문에 큰 단점이라고 할 수는 없습니다.
CSR은 무엇인가요?
CSR은 Client Side Rendering의 약자이며, 클라이언트 측(브라우저)에서 자바스크립트 파일을 통해서 콘텐츠들을 렌더링 하는 방식입니다. 처음에는 자바스크립트 링크가 걸려있는 빈 문서를 사용자에게 보여주고 사용자와 상호작용이 이뤄지는 순간 필요한 콘텐츠들을 렌더링합니다.
MPA은 무엇인가요?
Mutiple Page Application의 약자이며, 여러개의 Page로 구성된 Application입니다. Server Side Rendering 방식으로 렌더링합니다.
새로운 페이지를 요청할 때마다 서버에서 렌더링된 정적 리소스가 다운로드되면서 전체 페이지를 다시 렌더링합니다.
SSR은 무엇인가요?
Server Side Rendering의 약자이며, 서버에서 페이지를 만들어서 클라이언트에게 보여주는 방식입니다. 기존의 웹개발에서 주로 사용되던 방식으로 브라우저에 렌더링되는 형태를 HTML문서로 만들어서 보내주는 식으로 진행이 됩니다. 이 방식은 요청시 새로고침을 해야하기 때문에 사용자 경험을 떨어뜨리는 점이 있습니다.
Component란 무엇인가요?
컴포넌트는 리액트로 만들어진 앱을 이루는 최소한의 단위이며 이 컴포넌트를 모아서 하나의 페이지를 만듭니다. 리액트에서 컴포넌트 render, state, props로 구성되어 있으며 함수형 컴포넌트와 클래스형 컴포넌트가 있습니다.
함수형 컴포넌트 vs 클래스형 컴포넌트
리액트에서 컴포넌트는 클래스형 컴포넌트와 함수형 컴포넌트가 있습니다. 클래스형 컴포넌트는 클래스로 컴포넌트를 정의한 것이고, 함수형 컴포넌트는 함수로 컴포넌트를 정의한 것입니다. 두 개의 가장 큰 차이점은 컴포넌트의 상태와 생명주기를 다루는 방식입니다.
먼저 클래스형 컴포넌트는 this.state로 상태를 관리하고 메서드를 사용해서 생명주기를 다룹니다. 반면 함수형 컴포넌트는 훅을 사용합니다. useState로 상태를 관리하고 useEffect로 생명주기를 다룹니다.
리액트 Hooks란 무엇인가요?
클래스형 컴포넌트의 this 바인딩 이슈, 로직 재사용 어려움 등의 단점 때문에 함수형 컴포넌트가 생기게 되었는데 함수형 컴포넌트에서 state, lifeCycle 관련 기능을 사용할 수 없어 리액트 Hooks로 해결하게 되었습니다.
