1. 개요
- facebook 제공
- 프론트엔드 프레임워크 (React.js, Vue.js, Angular)
==> JS 기반 - MVC 패턴에서 V를 담당
- 가상 DOM 이용한 빠른 DOM 조작 가능
(DOM의 복사본을 수정하고 실제 DOM과 가상 DOM을 비교하여 변경된 사항만 렌더링 해준다)
1) 개발 방법 2 가지
(1) 함수형
- 현재 개발 방법
- 일반 함수 가능
- arrow 함수 가능
(2) 클래스
- 과거에 주로 사용됨
2. React 종류 세 가지
1) CSR (Client Side Rendering)
- 웹브라우저에서 랜더링하는 방식
- 일반적으로 React.js라고 부름
2) SSR (Server Side Rendering)
- JSP 처럼 서버에서 화면을 만들고 웹브라우저에 응답하여 랜더링되는 방식
- 일반적으로 next.js라고 부름
3) React native
- 모바일용 React 의미
3. 환경설정
1) node.js 설치
node --version로 확인
2) VSC 설치
3) VSC 플러그인
- Reactjs Snippets (함수형 기능 제공)
4) 크롬에 React 확장팩 설치 - React developer tools
4. React 프로젝트 생성
https://ko.legacy.reactjs.org/docs/create-a-new-react-app.html#createreact-app 참조
1) 리액트 툴체인
- facebook 공식 개발툴이고 CSR만 지원됨
- 요즘에는 vite 개발툴도 있음
2) 방법
(1) 설치
npm install npm-g (에러날 때)
npx create-react-app my-app(프로젝트명)
cd my-app
npm start
(2) my-app 폴더 생성
(3) react.js 버전 변경
- pacakge.json에서변경
"react": "^18.2.0",
"react-dom": "^18.2.0" - npm install 써서 적용시켜주기 (my-app 에서)
3) 실행
cd my-app
npm start
Local: http://localhost:3000
On Your Network: http://10.10.10.187:3000 5. my-app 프로젝트 구조
my-app
node_module (maven의 .m2 저장소 역할)
public
index.html
(메인 홈페이지 화면,
http://localhost:3000/index.html,
화면을 구성하는 특정 js 파일(index.js)을 이용해서 화면 랜더링함)
src
index.js (App.js를 import해서 App.jsj 화면을 랜더링)
App.js (결론적으로 여기에서 화면 구축하면됨)
package.json (maven의 pom.xml 기능)
README.md (실행 명령어 제공)- node_module 용량이 크니까 백업시 삭제 후 백업하고 npm install 해서 다시 받기 (ctrl+c 해서 서버 멈추고 삭제하기)
- index.html은 xxx.js를 받아와서 보여주는 역할을 한다 (React의 모든 화면은 js로 작성됨)
- 사진 파일은 public이나 src에 저장할 수 있다. 하지만 public에 저장하면 외부에서 접근이 가능하게 됨
- npm run build
- App.js의 html 같이 보이는 코드는 JSX임
- 화면 하나에 css 하나씩 따로 작성하는 것이 일반적인 방법이다
6. public vs src
=> 이미지 저장 가능한 폴더
1) public
- 외부에서 접근이 가능
- build시 누락될 수 있어서 권장 안 함
2) src
- assets라는 폴더를 만들어서 저장
- 외부에서 접근이 불가능 (private)
- build 할 때 누락없이 빌드 가능
7. 컴포넌트 (component)
1) 개념
- 웹 화면에서 보여지는 개별적인 블럭 의미
(JSP의 top.jsp, menu.jsp, bottom.jsp와 비슷) - 일반적으로 *.js 파일로 구현됨
- *.js 하나당 *.css 형태로 구현됨
사용 방법은 import './App.css'; - 일반적으로 중첩된 형태로 구현된다
2) 컴포넌트 종류 두 가지
(1) 함수형 컴포넌트
- 현재 개발할 때 거의 사용됨
- 예>
- 함수선언식 (이름있는 함수)
function fun() {}
- 함수표현식 (익명 함수)
const fun = function() {};
- arrow 표현식
const fun = () => {};
(2) 클래스 컴포넌트
- skip 한다
3) 함수형 컴포넌트
1) 함수명은 반드시 대문자로 지정해야한다
(일반 태그가 아닌 React 컴포넌트임을 알려주기 위함)
- 예> function App() {}
function Person() {}
function Menu() {} - 컴포넌트 사용
< App/>, < Person/>, < Menu/>
2) 반드시 return 해야됨
- 예>
function Person() {
return(
// JSX 코드 작성 : 화면에 랜더링됨
);
}3) 외부에서 사용하려면 반드시 export 해야됨
(1) export 사용하는 경우
- 예>
export {Menu, Bottom};
import {Menu, Bottom} from './components/XXX.js'
(2) export default 사용하는 경우
- 파일당 한 개만 가능. 따라서 사용할 때 중괄호가 필요 없음
- 예>
export default Menu;
import Menu from './components/XXX.js'
8. JSX (Javascript XML)
1) 개요
- 웹브라우저에 랜더링되기 전에 html로 변환됨 (babel 도구 이용)
즉, JSX는 웹브라우저에서 직접 사용이 불가능한 비표준 문법임
2) 특징
- 반드시 root 태그가 있어야됨
- JSX에서 JS의 변수값 등을 출력할 때는 {변수값} 사용한다
- {변수값}은 산술연산자, 비교연산자, 논리연산자, 3항연산자 사용 가능
- 논리값(true/false)과 null은 {변수값} 사용시 출력이 안 됨
3) CSS 적용하는 방법
(1) html의 class 속성
: class 속성명 대신에 className을 사용해야된다
< div className="xxx">
(2) html의 style 속성
: style 사용할 때는 반드시 중첩 중괄호를 사용해야된다
< div style={{color:red}}>
(3) html의 < label for=""> 속성
: for 속성명 대신에 htmlFor을 사용해야된다
예> < label htmlFor="xxx" >
(4) 주의할 점
이전 css 문법에서 사용했던 케밥표기법 (font-size, background-color) 대신에 카멜표기법 (fontSize, backgroundColor)을 사용해야됨
4) && 이용한 조건부 랜더링 ⭐⭐⭐
-
예> { 변수 && < Menu /> }
변수가 true 이면 < Menu /> 컴포넌트 랜더링, false이면 랜더링 안 됨 -
{...변수} 형식의 spread 연산자 사용 가능
-
이벤트 구현시 이벤트 핸들러는 카멜표기법을 사용해야된다
예> < button onClick={go}> OK</ button> -
JSX 주석
{/* JSX 주석 */}
==> 결론은 JSX에서 JS 사용할때는 반드시 {} 사용한다
