[React] 리액트 & Next.JS

React 리액트 시작하기.

OnceBH 2020. 12. 28. 06:14
반응형

독일 개발자 리액트 리액트훅

React 리액트 시작하기.

 오늘날 웹과 앱은 쉼 없이 개발되고 새로운 기능들이 나오고 있습니다.

그중 가장 유명한 리액트라는 것에 관해 여러분들과 전혀 비전문적이게,

너무나 이해하기 쉽게 알아보고 싶습니다.

우리가 오늘날 웹에서 할 수 있는 일들은 여러분이 생각하던 것보다 넓고 무궁무진합니다.

전진합시다.

 

목차

  1. 리액트란 무엇인가?? 왜 필요한가??
  2. 리액트 훅이란 무엇인가??
  3. 마지막으로.

 

1. 리액트란 무엇인가?? 왜 필요한가??

 

 React란 무엇인가??

React는 Facebook에서 제공해주는 현재 가장 핫한 웹 개발 프런트엔드 라이브러리입니다.

사실 라이브러리 없이 기본 HTML, CSS, Javascript로도 충분히 멋진 홈페이지를 만들 수 있습니다.

그렇다면 왜 이러한 라이브러리들이 필요할까요??

React 라이브러리의 특징을 알아보도록 하겠습니다.

 

1. 동적인 웹사이트를 만들기에 좋습니다.

2. 싱글 페이지 애플리케이션 작성에 좋습니다.

 

동적인 웹사이트란 무엇일까요?? 

동적인 웹사이트는 개발자가 짜 놓은 코드를 서버가 그대로 보여주는 것이 아닌,

유저와 상호작용하는 홈페이지를 말합니다.

예로 우리가 Facebook 사진에 Like를 누르는 것과 같습니다.

우리가 Like버튼을 누르면 표시가 되고 색이 바뀌며,

총 몇 명이 눌렀는지 숫자가 바뀌게 되죠.

여기서 React를 사용하지 않는다면,

우리는 Like를 누르는 족족 페이지 전체를 업데이트해야 하며,

우리는 계속해서 서버에게 불필요한(변화될 필요 없는) 정보들까지,

계속해서 요청을 해야 합니다.

하지만 React는 컴포넌트 기반의 라이브러리입니다.

즉 유저와 상호작용하는 그 부분만을 업데이트 함으로써

불필요한 요청을 줄일 수 있습니다.

물론 서버에 모든 요소를 요청해 불러온다고

홈페이지가 비정상적으로 느려지지는 않습니다.

체감으로 느끼기에 0. 몇 초 정도 느려지게 될 것입니다.(홈페이지마다 다를 수 있습니다.)

하지만 그 0. 몇 초로 유저는 이미 충분히 느리고, 답답하다고 느낄 수 있으며,

각각 필요한 요청만 보냄으로써 비교적 자원 사용에 상당히 효율적이고 비용면에서 매우 저렴합니다.

 

싱글 페이지 애플리케이션(SPA) 무엇일까요??

싱글 페이지 애플리케이션이란,

유저 브라우저 쪽에서 자바스크립트가 주어진 정보와 자료를 따라 렌더링 하는 기술입니다.

예전에는 유저가 홈페이지 내에서 다른 사이트를 들어가려면

사이트 별 HTML이 필요했습니다.

예로

index.html
login.html
register.html

과 같이 말이죠.

 

하지만 SPA는 하나의 HTML을 두고 자바스크립트가 필요에 따라

요청을 보내 렌더링을 하여 유저에게 보여줍니다.

즉 서버가 하던 일을 유저의 브라우저에서 할 수 있게 된 것입니다.

이로써 유저는 홈페이지 내부를 이리저리 옮겨 다니지 않고,

하나의 HTML에서 여러 다른 정보를 보고 상호작용 할 수 있습니다.

 

2. 리액트 훅이란 무엇인가요??

 

 리액트와 리액트 훅의 가장 큰 차이 중 하나는

클래스 기반 혹은 함수 기반 이라는 점입니다.

리액트 훅이 기존 리액트에 비해 모던하며,

자바스크립트에 조금 더 사용하기 적합합니다.

또한 전에 포스팅한 자바스크립트  ES6의 arrow function으로

특히 멋지게 리액트 훅을 이용하실 수 있습니다.

리액트 훅을 배우시면 이것저것

시도하고 도전해 볼 수 있는 것들이 무궁무진합니다.

리액트를 어떻게 사용하는지에 관한 글이나 영상은 많습니다.

하지만 저는 차차 리액트와 훅에서 자주 쓰이는 문법,

혹은 컴포넌트들을 어떻게 정의하고 구조화하는지,

어떻게 컴포넌트를 효율적으로 재사용하는지에 관해 포스팅하고,

가능하다면 스스로 작은 프로젝트를 만들어

여러분들과 공유하고 싶습니다.

 

3. 마지막으로.

 

 개발자는 게을러야 합니다.

같은 작업을 여러 번 하지 않도록 말이지요.

또한 개발자는 재능기부자여야 합니다.

그리하여 모든 사람들이 개발에 쉽게 접근, 사용할 수 있고,

저희 같은 개발자들도 발 빠르게 새로운 기능들을 개발, 적용할 수 있습니다.

그런 의미에서 여러분과 같이 게으름쟁이 같은 재능기부자가 되고 싶습니다.

항상 시작이 반입니다.

누구든지 개발의 뜻이 있다면 시작해보세요!

항상 건강하시고 도전하시길 바랍니다.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.

 

 

 

 

 

 

 

 

 

 

반응형