📌React.js

자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수 된다.

React가 등장하기 전에는 AngularJS 같은 프레임워크들이 MVC나 MVVM과 같은 패턴을 사용해 애플리케이션을 구조화하는 것이 일반적이었습니다

하지만 React가 등장하면서 MVC 또는 MVVM 패턴에 국한되지 않고, 컴포넌트 기반의 아키텍처를 채택해서 애플리케이션의 UI를 구축한다고 하는데요.

React의 또 다른 핵심 특징은 가상 DOM의 사용입니다. 가상 DOM은 실제 DOM의 효율적인 대체제로, 실제 DOM에 비해 변경사항을 빠르고 효율적으로 처리할 수 있습니다.

변경이 필요한 경우, React는 가상 DOM에 이러한 변경사항을 먼저 적용한 다음, 최종적으로 실제 DOM과 비교하여 실제로 필요한 변경사항만을 실제 DOM에 반영합니다.

이 과정은 웹 애플리케이션의 성능을 대폭 향상시키며, 사용자 경험을 개선합니다.

🏷️DOM(Document Object Model)

웹 페이지를 프로그래밍적으로 다룰 수 있는 객체 기반의 구조

즉, 웹 브라우저가 HTML 문서를 읽은 후 생성하는 페이지의 객체 기반 표현 방식을 말합니다.

🏷️모듈(Module)

코드를 구성하고 조직화 하기 위한 단어

재사용 가능한 기능이나 변수 또는 함수를 포함할 수 있고, 코드의 재사용성을 높이는데 사용되며 외부 의존성을 관리해 코드 의존성 최소화해서 유지보수성을 향상 시킨다.

🏷️컴포넌트(Component)

사용자 인터페이스(UI)를 구성하는 단위

일반적으로 HTML,CSS,JavaScript로 구성되며, 웹 애플리케이션 또는 UI 라이브러리(예: React, Vue.js)에서 사용됩니다. 또한, 재사용성과 유지보수성을 높이는데 중요한 역활을 한다.

🖥️실습

www.Replit.com
이 사이트는 온라인 코드 에디터 및 컴파일러로, 다양한 프로그래밍 언어를 배우거나 새로운 기술을 시도하고 싶은 사람들에게 추천해요 👍

일단 먼저 Create Repl 을 클릭하게 되면 이 창이 뜨는데요. Template에서 사용하고자 하는 언어를 검색 후

처음 공부해보는 거라 파일명을 react first day 설정했습니다. 적어준 다음 Create Repl 생성하면 됩니다.

App.jsx가 여기가 이제 웹 사이트에 보일 내용인데요.

💡jsx

JavaScript XML의 약자로 React.js에서 사용되는 JavaScript의 확장 문법으로, JavaScript 코드 안에서 HTML와 같은 마크업을 작성할 수 있게 해주고 React 컴포넌트에서 UI 렌더링할 때 매우 편리하다.

실행 시켜보면 App.jsx에 있는 내용이 뜨는 걸 확인 할 수 있습니다.

이번에는 React만 지워보면

자동으로 업데이트 되는 걸 볼 수 있음!

다른 프로그래밍 언어들 같은 경우 ctrl + S로 저장 했는지 
항상 체크 해야되고 F5로 새로 고침도 주기적으로 해줘야 됐는데.. 
자동으로 알아서 업데이트 된다 진짜 편하고 좋네요. 
이래서 React 많이 쓰는구나 느꼈어요.. 👍

리액트는 단 하나의 HTML 페이지를 사용해서 SPA 개발을 한대요.

💡싱글 페이지 애플리케이션(Single Page Application, SPA)

• 웹 애플리케이션 또는 웹 사이트에서 하나의 웹 페이지만을 사용하여 사용자에게 다양한 정보와 상호작용을 제공하는 접근 방식
  • 벡엔드 서버와 비동기적으로 통신해서 새로고침하지 않고도 필요한 데이터를 불러오거나 업데이트가 가능

여기서 body 안에 div에 있는 id=root 잘 기억해두기 !

React에서는 index.jsx 파일이 중요한데
이 index.jsx 파일은
index.html 과 App.jsx를 연결해주는 파일

안에 내용을 보면 doument.getElementByID('root'))
아까 기억하라던 id인 root랑 이어주겠다는 뜻

import App from './App' 은

이 App.jsx 파일을 가르키는 것

이제 박스에 선을 그려보려고 함

기존 사용하던 방식은 <div class=""> 주면 됐지만 React는 <div className="box">을 className을 줘야 한다고 한다

이렇게 하면 박스에 선이 생긴 걸 볼 수 있음!

박스 4개를 만든다고 했을 때

이렇게 만들면 되지만 코드 보면 같은 내용이 중복 돼있어 보기 좋지 않음..

src 폴더 안에 Box.jsx 파일을 만들어주고
이 때 Box.jsx는 컴포넌트

위쪽에 import 해준 다음

function 함수 사용해서 아까 만든 return

Box 라는 컴포넌트를 만들어서 export 내보내기 할 준비가 됐다는 뜻

그런 다음 App.jsx 로 돌아와서
Box를 import 해주고 main 안에 썼던 내용들은 다 지워준다

Box 한개를 불러오려고 하면 main 안에 Box를 입력해주면 대박..

만약 2개 더 불러오고 싶다 하면

아까보다 코드가 간결해지고 유지보수 하기에도 용이해진 걸 볼 수 있다

이제 Box 값에 name을 줘서

각각 다 다르게 name 준대로 출력이 된걸 볼 수 있다
이거를 react 에서 props 개념이라고

이번엔 num 을 추가해서

여기에서 button 을 추가하고 싶다 하면
기존에는 하나하나 다 button을 넣어줬어야 했는데

React는 코드를 찾아다니면서 버튼을 하나하나 추가할 필요가 없어지게 된 것!

기존 하던대로 button에 onClick 이벤트 줘서 alert 창 띄우기

이제 버튼 클릭하면 alert 창 띄워진 걸 볼수있게 되는데 ..

📌요약

HTML 컴포넌트와 그와 관련된 함수를 뭉쳐서 세트로 만들고 이거를 컴포넌트라고 한다.
리액트는 이 컴포넌트를 여러개 만들어서 가져다 써서 코드의 재활용성을 높이는 것!