React JS: 반응이 있는 자바스크립트
- META가 관리하는 프레임워크
- JS 보다 편리하게 사용할 수 있는 도구
- 왜 배워야 하는가?: 생태계 - 수요 ↑
- stack overflow - 개발자 커뮤니티
- 2022년 기준 개발자 설문조사 → JS Framework : 1. Node > 2. React(front)
- 프론트: vue도 뜨고 있다.
- wappalyzer로 확인 가능
- Virtual DOM 개념
- 효율적인 접근을 위해
- 네이버 클릭시 모든 페이지가 새로고침됨 ⇒ 비효율적
- 변화해야 하는 부분만 새로 그려줘서 매우 부드럽고 빠르다.
- 예시) 인스타그램, 최근 쇼핑사이트, 스트리밍 사이트
- React(페이스북이 유지보수, 다양한 방법론) / Angular(구글) / Vue.js(깔끔하고 쉽다. 1인이 개발)
React - 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
jsx
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
//<script **defer**="./index.js”r> 옵션
JSX(Javascript XML)문법: JS코드 내부에 html 코드를 쓸 수 있게 만들어준다.
- JS에 XML을 추가한 문법
- 보통 리액트에서만 사용
- HTML 문서 구조를 JS에서도 사용 가능.
- 따라서 JS 내부에서도 HTML을 짜듯 코드 구성이 가능해진다.
- 이를 읽기 위해서는 Babel 이라는 컴파일러(번역기)가 필요
Babel
https://babeljs.io/
- JS 컴파일러
- 현재 JS 문법은 ES6(2015)
- ES6과 ES5 문법의 충돌이 잦아서 ES6문법을 ES5문법으로 변환해주던 기능 ⇒ 다른 추가적인 언어들에 대한 컴파일러 역할 (대표적인 것이 REACT)
Create-react-app 명령어
→ 자동으로 최신 버전으로 리액트를 개발할 수 있는 환경
https://ko.reactjs.org/docs/create-a-new-react-app.html#create-react-app
npx create-react-app my-app
cd my-app
npm start
Terminal ⇒ 빨강, 초록, 파랑은 읽어라
NPX(실행시키고 사라진다. - 캐싱) / NPM(컴퓨터에 남는다.)
- NPM: 노드 패키지 관리 도구
- NPX: Node Package eXcute: 노드 실행을 위한 명령어
- npm 과는 달리 최신 버전의 패키지를 임시로 설치해서 실행하는 용도- 호환이슈x
- 한번만 임시로 설치해서 해당 Node를 실행시키고 사라진다.
- 따라서 npm에 대한 의존성이 없어서 다른 node.js 버전으로 이동도 가능하고 좀 더 자유로운 코드 공유가 가능하다.
- 한번만 쓰고 마는 코드 Create-react-app 같은 경우 유용하다. 한번만 설치하고 할 일이 끝나면 삭제되어 사라진다.
프로젝트 폴더 살펴보기 - 폴더는 소문자로 하는 것이 좋다. 안되면 package.json 다시 저장
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
public/index.html - 하나의 html 파일
src/index.js
<React.StrictMode> : 코드를 무조건 2번 실행시켜줌.
: 자바스크립트 코드 덩어리 - html, js코드가 들어있는 것을 이렇게 사용 가능
- 실제 우리는 App.js 코드 내부에서 개발을 하게 됨.
- 리액트는 코드 변화가 생기면 바로 바로 반영
JSX
- 기존에는 HTML 요소와 JS요소를 따로 나누어서 사용해야 했음. 그림과 기능을 따로 했어야 했다.
- JS 문법 안에 HTML을 쓸 수 있게하여 더 직관적이고 편리하게 코딩 가능
- HTML 요소는 return ( );안에 그대로 써주면 되고, JS를 쓰고 싶으면 그 안에 { }안에 써주면 된다.
- JSX 문법을 사용하지만 브라우저는 JS를 받음 - 바벨이 JSX를 순수JS로 번역하여 브라우저에 전달
JSX 문법
- 기존 Dom 요소에 class를 부여할 때 쓰던 class는 className이라고 써야 한다! (바벨이 헷갈림)
- JS에서 class는 JS의 클래스 타입을 의미하므로 구분해줘야 한다.
⇒ 편리한 데이터 바인딩
인라인 스타일 적용하기
→ 인라인 스타일도 { } 로 전달해야 한다.
- 단 객체 타입으로 전달해야 한다. ⇒ 중괄호가 2개
kebab-case to camelCase
: JS로 번역할 때 -는 빼기를 의미하니 ,바벨이 헷갈리니까
이벤트 핸들러 적용
- onclick: JS에서는 DOM요소에 대한 이벤트를 컨트롤 하는 방법으로 DOM 요소에 onclick을 걸거나 addEventLister를 사용했음
- 리액트에선 onClick 사용 → 익명함수를 정의해서 사용하는게 안전
function App() {
function printConsole() {
console.log('콘솔 출력');
}
return (
<div className="App">
<span onClick={printConsole()}>클릭</span>
</div>
);
}
-함수 정의를 하지 않고 사용하면 에러가 뜬다.
function App() {
const Styles = {marginTop: "32px", backgroundColor: "skyblue"};
const helloStr = "Hello, first exercise";
return (
<div className="App">
<div style={Styles} onClick={()=> {
alert("클릭됨")
}}>{helloStr}</div>
</div>
);
}
Webpack
결과적으로 배포할 때 브라우저가 알아들을 수 있는 4가지로 변환 - js, css, jpg, png
- 의존성이 있는 모듈을 모아서 하나의 파일로 만들어 주는 역할
프로젝트 폴더에 가서 빌드
npm run build
npx serve -s build
Component
- 리액트의 핵심 개념
- Virtual DOM의 핵심
- React는 컴포넌트 단위로 페이지 새로 고침이 가능하여 리소스 절약이 가능하고 사용자에게 부드럽고 빠른 경험을 제공한다.
- 독립적으로 구성하여 재사용이 편리하다.
- 데이터는 속성(props)로 받고, 상태(state)에 따라 view를 변화한다.
- 예시: 하나의 컴포넌트만 만들고 변화되는 데이터만 props로 전달하여 재사용하면 됨
Error 발생!
- 컴포넌트는 JS에서 클래스를 기반으로 만들어 졌기 때문에 PascalCase를 사용했었음. camelCase를 쓰는 함수 또는 변수와 구분하기 위해 여전히 PascalCase를 사용한다.
Component의 종류
-
클래스형 컴포넌트 - 요즘은 안쓰지만, 어떻게 생겼는지, 무엇인지는 알아야 한다.
- 최초로 사용되었던 컴포넌트
- 컴포넌트 자체가 JS의 클래스와 유사하기 때문에 자연스럽게 사용
- 리액트의 장점 모두 활용 가능. 그러나 메모리 자원도 더 먹고 느림.
- render 라는 함수를 사용해야만 그릴 수 있다. 최근에는 함수형 컴포넌트(가볍고 쉬운)에 밀렸다.
- 함수형 컴포넌트 - 리액트 16.8 v 부터~
- JS에서 익숙하게 사용하였던 함수를 컴포넌트화
- 구조 자체가 클래스에 비해 단순하여 코드도 단순하고 빠르게 배울 수 있다.
- 메모리도 덜 먹고 빠르다. - render 함수가 빠짐, 클래스에 필요한 메모리 불필요
- 다만 리액트의 중요 기능 사용이 불가능하여 제한적으로 사용 → 최근에는 Hooks라는 기능의 도입으로 같은 역할 수행 가능!
import logo from "./logo.svg";
import "./App.css";
function App() {
function MainHeader() {
return (
<h1>함수형 내부 정의</h1>
)
}
return (
<div className="App">
<MainHeader/>
</div>
);
}
export default App;
import는 src 안에 있는 것만 가능. public 폴더 참조 불가 src 폴더 안의 이미지만 참조 가능
- public 폴더의 이미지를 참조하려면?
- src=”/” ⇒ public 폴더의 위치와 같다.
- js 적으로 import
- public 이용해서 갖다 쓰기