React : 선언형 UI
필요성 :
웹 페이지를 동적으로 구성하여 DOM을 조작할 때마다 엔진이 웹페이지를 새로 그리기 시작하면 성능이 저하되는데, 추상화된 자바스크립트 객체를 구성하여 바뀐 부분만 실제 DOM에 적용
VDOM + Diffing
Document Object Model ( DOM )
객체로 문서 구조를 표현.
[Vanilla JS - DOM 조작]
const root = document.getElementById('root');
const btn = document.getElementById('btn');
let clicked = false;
const render = () => {
// 기존 내용 제거
root.innerHTML = '';
// p요소 생성
const p = document.createElement('p');
p.textConetent = clicked ? '클릭됨' : '리액트';
// 추가
root.appendChild(p);
};
btn.addEventListener('click', () => {
clicked = !clicked;
render();
});
render(); 의존성 :
리액트 애플리케이션은 웹 브라우저에서 실행되는 코드이므로 Node.js와 직접적 연관은 없지만 프로젝트를 개발하는 데 필요한 주요 도구들이 Node.js를 사용함
node.js : 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임
- 바벨(Babel) : Javascript 트랜스파일러. ECMAScript 6(ES6+)를 호환시켜 줌
- 웹팩 (Webpack) : 모듈화된 코드를 한 파일로 합치고(번들링, 의존성 관리) 코드를 수정할 때마다 웹 브라우저를 리로딩
Javascript && [packages: react(JSX syntax) & babel & webpack 등]
----------------------------------------------------------------
Node.js = Js engine + 개발환경 확장 기능[React Project - DOM 조작]
import React, { Component } from 'react';
// 바벨 문법 사용 Class Property Initializer Syntax
class MyComponent extends Component {
state = {
clicked : false
};
handleClick = () => {
this.setState(prev => ({
clicked : !prev.clicked
}));
};
render() {
return(
<>
{/*JSX*/}
<p>{this.state.clicked? '클릭됨' : '리액트'}</p>
<button onClick={this.handleClick}>클릭</button>
</>
);
};
export default MyComponent;특징:
: 리액트로 만든 자바스크립트 파일에서는 javascript 문법이 아니라 html과 유사한 JSX코드를 이용해 정적 컨텐츠의 구조를 가시화 해서 동적 컨텐츠와 연결할 수 있음
: 자바스크립트 확장 문법 JSX 사용.
JSX 코드는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됨. Javascript --- < JSX > --- HTML
-HTML : 렌더링 시작포인트 root 요소가 필요함, HTML과 유사하지만 같지 않음.
ex. HTML/onclick <> JSX/onClick
-JavaScript: {}로 감싸서 JSX 코드와 구분
조건부 문법:
- if else : {name === '리액트' ? true : false}
- if : {name === '리액트' && <h1>리액트입니다.</h1>};
css 연결
- 인라인 스타일시트, [style={{color}}]
- 외부 스타일시트, [className=""]
라이프사이클 관리
- props : 부모로부터 상속받는 파라메터
- state : 컴포넌트 내부 상태값
- setState(prevState => {})
: setState() 비동기 batch 처리로 상태값 변경. prevState에 가장 최신 상태값을 저장.
- useState() : Hooks 기능 사용. 함수형 컴포넌트에서 state값 사용작성
- 클래스형 컴포넌트
- 함수형 컴포넌트
install(ubuntu)
node.js 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/initial.sh | bash
nvm --versionyarn 패키지 관리자 설치(선택)
npm install --global yarn
yarn --version바벨, 웹팩 등 리액트 개발환경 구축
yarn create react-app hello-react
VScode packages
- ESLint : Javascript 문법 및 코드 스타일 검사
- Reactjs Code Snippets(charalampos karypidis) : 단축 단어
- Prettier-Code formaater : 코드 스타일 자동으로 정리
Editor:Format on Save
hi