React ?

 

리액트(React)는 자바스크립트 라이브러리로, 사용자 인터페이스를 만들기 위한 도구야.

자, 중학생도 이해할 수 있도록 비유를 들어 설명해 볼게.

 

 

상상해 봐, 네가 가장 좋아하는 만화책이 있어. 그 만화책에는 여러 페이지가 있고, 각 페이지에는 캐릭터들이 움직이고 대화를 나누지? 리액트는 마치 그 만화책처럼 웹 페이지를 여러 "페이지"로 나누어 관리하는데 도움을 줘.

 

 

이 만화책은 여러 장면(scene)으로 이루어져 있어. 리액트에서는 이 장면을 '컴포넌트'라고 불러. 예를 들어, 캐릭터 대화가 담긴 한 장면은 하나의 컴포넌트가 될 수 있어. 이러한 컴포넌트들을 조합해서 전체 이야기를 만들어나가는 거지.

리액트는 엄청난 유연성을 제공해. 만약 만화책의 한 장면을 수정하고 싶다면, 해당 장면만 다시 그리면 돼. 리액트에서는 상태(state)라는 것을 사용해서 특정 부분만 다시 렌더링 할 수 있게 해 줘. 즉, 만화책에서 한 장면만 수정하는 것과 비슷한 원리야.

그리고 리액트는 가상 돔(Virtual DOM)이라는 아주 똑똑한 기술을 사용해. 가상 돔은 리액트가 화면을 효율적으로 업데이트할 수 있도록 도와주는데, 이것은 마치 만화책을 수정할 때 전체 책을 다시 그리는 게 아니라 수정된 부분만 업데이트하는 것과 유사해.

간단히 말해서, 리액트는 웹페이지를 여러 조각으로 나누어 효율적으로 관리하고 업데이트할 수 있게 해주는 도구지!

 

그렇다면, 여기서 어떻게, 어떤 기준으로 컴포넌트를 잘 나눌지 한번 짚고 넘어가 보자.

 

* DRY (Don't Repeat Yourself):

비유: 만약 같은 이야기를 계속 반복해서 하는 것
의미: 코드에서 동일한 작업이나 정보가 여러 곳에 중복되면, 그것을 하나의 장소로 추출하여 중복을 피하는 원칙이야. 이렇게 하면 유지보수가 쉬워지고, 코드의 일관성이 유지될 수 있어.
예를 들어, 헤더와 푸터에 동일한 로고가 들어간다고 가정해 보자. DRY 원칙에 따르면, 로고를 따로 컴포넌트로 만들어서 헤더와 푸터에서 동일한 컴포넌트를 사용하는 것이 좋지.

 

*SR (Single Responsibility):
비유: 한 책에서 여러 역할을 하는 캐릭터
의미: 각각의 모듈, 클래스, 혹은 함수는 하나의 기능이나 역할만을 수행하는 게 좋아. 이렇게 하면 코드를 이해하기 쉽고, 수정이나 확장이 용이해질 수 있지.
예를 들어, 버튼 컴포넌트가 페이지 이동과 같은 여러 기능을 수행한다면, SR 원칙에 따라 버튼 컴포넌트를 작게 나누어 각각의 컴포넌트가 하나의 역할만 수행하도록 만드는 것이 좋아.

 

그럼 이제 리액트의 개념을 더 확장해서, SPA(Single Page Application)와 CSR(Client-Side Rendering)에 대해 알아보자.

 

* SPA(Sigle Page Application):

SPA는 말 그대로 한 개의 페이지로 이루어진 애플리케이션을 의미해. 리액트는 SPA를 만드는 데 매우 적합한 도구 중 하나야. 여러 페이지로 이루어진 전통적인 웹 애플리케이션과는 달리, SPA는 초기 로딩 후에 필요한 데이터만 받아와 동적으로 화면을 업데이트해.
비유로 설명하자면, SPA는 책 한 권 전체를 한 번에 받아온 다음, 필요한 장면들을 필요할 때마다 찾아서 보여주는 것과 비슷하지. 페이지 간 전환이 일어날 때마다 새로운 페이지를 서버에서 불러오는 게 아니라, 필요한 부분만 갱신하거나 로딩하는 방식이야.

 

*CSR (Client-Side Rendering):

CSR은 웹 애플리케이션의 렌더링을 클라이언트 측에서 처리하는 개념이야. SPA에서 주로 사용되는데, 사용자가 새로운 페이지로 이동하거나 데이터를 요청할 때 서버에서 받은 데이터를 클라이언트 측에서 동적으로 렌더링해.
이를 비유하자면, 만화책의 한 장면을 클라이언트(당신의 브라우저)에서 직접 그리는 것과 유사해. 책의 내용을 서버에서 가져와서 클라이언트에서 렌더링 하게 되지. 이로써 사용자는 빠르게 페이지 간 전환이 가능하고, 느려질 일이 없어.

요약하자면, 리액트를 사용하여 SPA를 구축하면 CSR을 적극 활용하게 되는 거야. 클라이언트 측에서 렌더링을 처리하여 웹 애플리케이션이 보다 빠르고 동적으로 동작하게 돼. 이런 형태의 개발은 사용자 경험을 향상하는 데 큰 역할을 할 수 있지.