React, Next.js 주요 개념

React의 주요 기능

 

01. 컴포넌트는 리액트 앱의 가장 최소 단위, 이전의 MVC패턴에서 View부분의 객체들의 결합도를 낮추어 재사용가능하게 만들었다.

 

02. JSX는 JavaScript + XML의 약자로, 일반적으로 리액트 앱 내에서 XML문법으로 작성된 코드는 번들링되는 과정에서 JavaScript로 변형된다.

 

03. LifeCycle(생명주기, 생애주기)란 리액트 컴포넌트에서 가장 중요한 개념이다. 리액트의 생애주기는 크게 생성(componentDidMount), 업데이트(componentDidUpdate), 제거(componentWillUnmount)의 3주기로 나뉘어져 있는데, 각 주기마다 사용되는 API를 LifeCycle API라고 한다. 

 

04. Props란 Property의 줄임말로, 부모 컴포넌트로부터 자식 컴포넌트에 전달되는 읽기 전용 속성(데이터)을 의미한다. 자식 컴포넌트는 Props들을 받기만 할 뿐, 변경할 수 없다. 컴포넌트는 상속하는 부모컴포넌트로부터 Props를 받아 자식 컴포넌트에 전달하고, 해당 컴포넌트는 Props를 받아서 element를 출력한다. 

 

05. State는 원 단어 뜻 그대로 상태의 의미를 가지고 있으며, 컴포넌트의 속성값을 저장, 변경할 수 있는 객체이다. 공식문서에는 State는 component의 memory 역할을 한다고 쓰여져 있다. State가 변경되면 component는 다시 render되고, (일반적으로 클릭, 제출하는) 여러 이벤트들과 동반되어 사용된다. 리액트 개발의 핵심 기능 중 하나로, 상태값을 효율적으로 관리하고, 상태값에 따라 화면이 불필요하게 업데이트되지 않도록 관리해야 한다. 

 

06. SPA(Single Page Application)란 한 페이지로 이루어진 어플리케이션이란 뜻이다. 과거의 웹 페이지는 여러 페이지로 구성되어 있었고, 새로운 페이지로 이동할 때마다 새로운 html을 받아서 표시하였다. 그러나 최근의 웹페이지는 한 페이지에 아주 많은 데이터가 포함되어 있기 때문에, 새 페이지로 이동할 때마다 뷰를 준비한다면 성능의 문제가 발생할 수 있었다. React는 뷰 렌더링을 사용자의 브라우저가 담당하게 한다. 

리액트 라이브버리에서는 뷰 렌더링을 사용자의 브라우저가 담당한다. 첫 GET 요청 이후로, 사용자의 요청이 들어오면, 필요한 부분만 JavaScript로 업데이트해준다. 

 

07. React Hooks란 v16.8부터 추가된 기능으로, 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 해 준 기능이다. 이 기능을 통해 함수형 컴포넌트에서는 할 수 없었던 상태값 관리(useState), 컴포넌트 생명주기 함수(useEffect)등을 이용할 수 있게 되었다. Hook은 JavaScript함수이지만 두 가지 규칙을 준수해야 하는데, 첫 번째는 최상위레벨에서만 훅을 호출하는 것이고(반복문, 조건문, 중첩된 함수에서는 Hook을 호출할 수 없음), 두 번째는 React함수 컴포넌트 내에서만 사용가능하다는 것이다. 

 

08. useState는 상태(state)를 관리하는 hook이다. useState에는 현재상태를 나타내주는 state값과, 이 state를 업데이트해주는 함수를 쌍으로 갖는다. 

09. useEffect는 side effect를 수행할 수 있는 hook이다. side effect란 리액트 컴포넌트 안에서 데이터를 가져오거나, 구독하고, 돔을 직접 조작하는 모든 동작을 side effect, 또는 effect라고 한다.(해당 동작들은 다른 컴포넌트에 영향을 줄 수 있고, 렌더링 과정에서는 구현할 수 없는 동작이다) 기존에 React class에서 사용했던 componentDidMount, componentDidUpdate, componentWillUnmount를 하나의 API로 통합한 것이다. 

 

10. useMemo란 메모이제이션된 값을 반환하는 React hook이다. 즉, 성능최적화를 위해서 연산된 값을 재사용하는 기능이다. 메모이제이션이란 기존에 수행한 연산의 결과값을 어딘가에 저장해두고 동일한 입력이 들어오면 재활용하는 프로그램 기법이다. 메모이제이션을 사용하면 중복연산을 피할 수 있기 때문에, 메모리를 사용하여 어플리케이션의 성능을 최적화해주는 것이다. React에서는 컴포넌트가 여러번 렌더링될 수 있다. 

11. useContext란 context값을 가져오는 hook이다. 해당 훅을 통해서 context객체를 가져와 값을 사용할 수 있다. context객체는 React의 개념으로, 부모가 자식 컴포넌트에게 Props를 하나하나 넘겨주지 않고도 컴포넌트 트리 전체의 데이터를 전달할 수 있게 하는 개념이다.(전역 상태관리) 주의해야 할 점은, useContext를 호출한 컴포넌트는 context값이 변경되면 항상 리렌더링되기 때문에, 필요한 파일에만 사용하는 것이 좋다. 

 

 

Next.js 주요 기능

12. Next.js는 React의 프레임워크이다. 라이브러리인 React와의 차이는 프로그램의 흐름에 따른 제어권한의 주체가 다르다는 것이다. Next.js의 경우 흐름의 제어권한을 개발자가 아닌 Next.js가 갖는다. 반대로 React같은 라이브러리는 어떻게 어플리케이션이 흘러갈지 개발자가 직접 정의하는 것이다.

 

13. Next.js의 장점은 다음과 같다.

1. 사전 렌더링(Pre-rendering): Next.js는 기본적으로 모든 페이지를 사전에 렌더링한다. 사전 렌더링이란 미리 html페이지를 만들어놓고 클라이언트에서 서버에게 요청할 때 빠르게 페이지를 보여주는 것이다. 이를 통해 페이지 로드 속도가 빨라지고, 검색엔진 최적화(SEO)에도 도움을 준다. React의 경우 SPA(Single-Page Application)으로 빈 html만을 로드하여, html 안에 아무런 내용이 없어, 검색 기능 사용 시 아무런 내용이 검색되지 않는다는 문제점이 있다. 이러한 문제를 Next.js로 해결할 수 있다. 

 

2. 자동 코드 분할(Code-Splitting): 각 페이지별 필요한 코드들을 작은 chunk로 프로그램의 번들로 분할하는 과정이다. Next는 자동 코드 분할 기능을 자체적으로 지원하는데, 예를 들어 pages폴더 안에 각 파일들이 빌드되는 동안 자체적인 javascript 번들로 자동 코드 분할을 하는데, 그 때 페이지를 실행하는 데 꼭 필요한 코드만 가져오도록 초기 로드시간을 향상시킬 수 있다. 

 

3. API routes: Next.js는 React를 위한 프론트엔드 프레임워크이지만, API routes 기능을 이용해 javascript만 알고 있어도 굉장히 쉽게 직접 API를 작성할 수 있고, 백엔드 없이 javascript만으로도 데이터통신이 가능한 앱을 만들 수 있다. 

 

4. 자동최적화(Built-in Optimization): Next.js는 자동으로 font, script, image등 여러 기능을 최적화해준다. 따로 설정하지 않아도 자동으로 지연로딩해준다거나, 성능 최적화작업을 대신 해줌으로써 개발 생산성을 향상시키고, 더 나은 유저경험과 성능을 제공해준다.

 

5. 미들웨어(Middleware): Next.js에는 특정 요청을 하기 전에 어떤 행동을 하고싶을 때 미들웨어를 사용해서 손쉽게 제어할 수 있다. 예를 들어 특정 페이지들은 로그인된 사용자만 접근가능하게 하려면 미들웨어에 인증이 필요한 페이지 경로만 간단하게 정의해주면 요청이 끝나기 전에 검증하는 로직을 추가할 수 있다.

 

6. 편리한 라우팅, 레이아웃(Routing, Layout): 기존 리액트에서는 라우팅을 위해 리액트 라우터 DOM이라는 라이브러리를 사용하여 직접 개발자가 라우팅 설정을 해줘야 했다. 하지만 Next.js는 파일 시스템을 기반으로 라우팅 경로를 설정하기 때문에 따로 라우팅하지 않아도 폴더 경로에 따라 페이지 경로가 설정되어 앱 구축과 관리가 빨라진다. Next.js v13부터는 새로운 레이아웃기능도 내장되어 있어, 각 페이지마다 공통된 레이아웃을 설정하지 않고도 layout파일 하나만 설정해주면 자동으로 전체 페이지의 레이아웃이 설정된다. 

 

14. SSR(Server Side Rendering)란 요청이 올 때마다 해당 html문서를 생성하여 반환해주는 것이다. SSR을 사용하면 사이트에 접속할 때 미리 렌더링된 html을 불러온다. javascript가 불러와질 때까지 반응하지는 않지만 미리 html과 css가 적용된 화면을 볼 수 있기 때문에 속도가 빨라진다. 이 기능의 장점은 페이지 데이터가 항상 최신화된 상태를 유지할 수 있다는 것과, 페이지가 동적이기 때문에 사용자들에게 더 interactive한 반응을 할 수 있다는 것이다.

 

15. SSG(Static Side Generation): 빌드 타임에 각 html페이지를 미리 생성하고, 요청하면 미리 생성된 페이지를 반환하는 것이다. 생성이 완료된 html문서를 재활용하기에 응답속도가 더욱 더 빨라진다. SSR과 달리, Server Side에 계속 요청한다고 해서 페이지가 변하지 않는다. 변하지 않는 마케팅 페이지, 수정이 많지 않은 블로그 게시글, 제품 목록, FAQ 페이지 등에 적용하기 좋다. 하이브리드형태로 SSR과 SSG 모두 적용할 수 있으나, 공식 문서에서는 SSG사용을 추천한다. 

 

16. SEO(Search Engine Optimization): 검색 엔진 결과(구글, 네이버 등)에 내 사이트가 잘 노출되도록 최적화해주는 기능이다. 

 

17. 라우팅: Next.js는 파일 시스템(pages)기반 내비게이션 기능을 제공한다. (파일 경로에 따라 바로 url을 만들어주기 때문에, 따로 라우터를 정의하지 않아도 된다. 매우 앱을 빨리 만들어줄 수 있고, 관리도 편하다.) Next.js는 NextLink라는 링크 컴포넌트를 사용해서 Client-Side Navigation도 사용할 수 있다. 최근에 추가된 기능 중에는 app 기반 라우팅도 추가되었다. Next.js v13.14 이후로만 stable한 버전으로 업데이트되어 있기 때문에, 최신화된 기능을 사용한다면 app기반 라우팅을 하도록 공식문서에서 권장하고 있다.