[코딩애플] React 기초 - Part 1. React 기초

📕 React Intro

🔎 Web-app

• 새로고침 없이 웹 탐색이 가능하다.
• Mobile-app 과 비슷한 사용감을 지닌다.
• Web-app을 쉽게 만들기 위한 자바스크립트 라이브러리 = React, Vue, Angular

🔎 Web-app의 장점

• 모바일 앱으로 발행이 쉬워진다.
• 뛰어난 사용자경험(UX)를 제공한다.
• 비즈니스 강점을 제공한다.(구매전환율이 높아짐)
• HTML 관리가 편리해진다.
• 리액트 문법으로 iOS/Android 모바일 앱 제작도 가능하다.
• 서버개발자가 편리해진다.

🔎 SPA Front-end Framework : React, Vue, Angular

SPA(Single-Page Application)?

• 서버는 HTML, CSS, JavaScript로 된 코드들(정적)을 브라우저에 전송한 후, 브라우저에서 JS는 주어진 데이터에 따라 웹 페이지를 랜더링
• SPA는 서버에서 데이터를 받아올 때마다 요청을 보내서 반환된 데이터로 사이트 내용을 갱신시킴
• 한번 로드된 화면에서 많은 기능을 사용할 수 있게됨

React : 함수. 자바스크립트에 가까움. 유연성.
Vue : 코드가 깔끔. 배우기 쉬움. 빠른 속도의 성장.
Angular : 구글에서 만듦. TypeScript(JS 보완) 매우 안정적이고 탄탄한 프론트엔드 앱 생성.

📘 React 작업환경 설정

1. Node.js 설치 (https://nodejs.org/)

create-react-app 라이브러리를 사용하기 위하여 설치한다. (npm이라는 툴 사용)

2. terminal > npx create-react-app [프로젝트명]

npx create-react-app blog

blog 라는 리액트 프로젝트를 생성한다.

3. VSCode(프로젝트) > npm start

npm start

생성된 blog 폴더를 VSCode를 통해 열고, 터미널에 npm start를 작성한다.

npm start : package.json의 scripts에 있는 start 명령어를 실행하는 부분

4. 리액트 프로젝트 폴더

node_modules : 라이브러리를 모은 폴더
public : static 파일 보관함
src : 소스코드 보관함
package.json : 설치한 라이브러리 목록

src\App.js ➡️ (index.js) ➡️ public\index.html
src\App.js → 메인 페이지에 들어갈 HTML 코드를 짜는 공간
public\index.html → 실제 메인페이지 HTML

📗 JSX 사용법 (HTML 대신 사용)

React 프로젝트의 src 폴더 안에 App.js 파일이 있다.
App.js 파일에서 App함수의 return 괄호 안에 HTML을 대신하여 JSX를 코딩한다.

JSX 란 ?
JavaScript eXtension 즉 기존 자바스크립트의 확장문법으로,
자바스크립트 안에 쓰는 HTML 문법을 뜻함
React가 HTML문법보다 편리한 이유 : 데이터 바인딩을 손쉽게 할 수 있다.

🔎 React에서 데이터 바인딩 쉽게하는 법 {변수, 함수 등}

데이터 바인딩

	function App() {
	  let posts = '강남 고기 맛집';
	  
	  return (
	    <div className="App">
	      <div className="black-nav">
	        개발 Blog
	      </div>
	      <h4>{posts}</h4>
	    </div>
	  );
	}

posts라는 변수를 선언하고, 중괄호를 사용하여 {posts} 변수를 데이터 바인딩한다.

	function App() {
	  let posts = '강남 고기 맛집';
	  function 함수(){
	    return 100
	  }
	  
	  return (
	    <div className="App">
	      <div className="black-nav">
	        개발 Blog
	      </div>
	      <h4>{함수()}</h4>
	    </div>
	  );
	}

함수라는 함수를 생성하고, {함수()} 함수를 데이터바인딩 한다.