React
react는 spa 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다.
React는 facebook에서 제공해주는 프론트엔드 라이브러리라고 볼 수 있다.
웹/앱의 View를 개발할 수 있도록 하는 인기있는 라이브러리라고 볼 수 있다.
특징
- component 기반구조
- virtual dom
- props and state
- jsx
virtualDom (가상돔)
실제 dom구조를 반영한 상태로 메모리에 있는 가상의 dom 이다.
가상돔은 돔이 생성 되기 전, 이전 상태값과 수정사항을 비교하여 달라진 부분만 dom에게 한번에 전달하여 딱 한번만 랜더링을 진행한다.
돔에 직접 접근해도 문제가 되지 않지만, dom이 직접 변경된다면 사소한 변경사항에도 전체가 재랜더링 되기 때문에 브라우저에 과부하가 올수 있다.
따라서 최대한 dom에 직접 접근하지 않기 위해서 virtual dom이 등장했다.
CRA (Create React App)
react프로젝트를 하기 위해 필요한 여러프로그램을 자동으로 설치해주는 도구(tool)이다.
<주의> npm i -g yarn을 통해 yarn을 먼저 설치 해주어야 한다.
dir // dir로 경로 설정 후
yarn create react-app 폴더명 // yarn 명령어로 cra 만들기컴포넌트(component)
리액트에서 개발한 모든 애플리케이션은 컴포넌트라는 조각으로 구성 돼 있다.
컴포넌트는 리액트의 핵심빌딩블록 중 하나로 UI구축 작업을 훨씬 쉽게 만들어 주고, 화면에 특정부분이 어떻게 생길지 정하는 선언체이다.
JSX
컴포넌트 생김새를 정의할때 사용하는 문법이다. 쉽게 말하면 Javascript를 확장한 문법입니다.
- 컴포넌트가 여러 엘리먼트를 return 할때 jsx규칙상 하나의 태그로 묶어서 return 해줘야 한다.
- 빈태그일때는 꼭 슬래시를 붙여서 꼭 태그를 닫자
- jsx문법안에서 js 문법을 사용하려면 반드시 중괄호를 써주자.
- jsx에서 클래스명 작성시 className속성을 통해서 작성해야한다.
import React from "react";
function App() {
// js문법 작성영역
const number = 1;
// jsx 영역
return (
<div className="App">
<p>안녕하세요 </p>
<p>
{number > 10 ? number + "은 10보다 크다" : number + "은 10보다 작다"}
</p>
</div>
);
}
export default App;- html 태그내에 스타일을 직접 넣을때 문법이 다르니 주의하자
import React from "react";
function App() {
// <p style="color: orange; font-size : 20px;">orange</p> 기존 스타일적용 인라인방식
// <p style={{color: 'orange', fontSize : '20px'}}>orange</p> jsx에서의 스타일적용 인라인방식
// 또는 변수를 선언 한 후 jsx에서 style= {변수명}을 지정후 스타일 적용
const styles = {
color: "orange",
fontSize: "20px",
};
// jsx 영역
return (
<div className="App">
<p style={styles}>안녕하세요 </p>
</div>
);
}
export default App;props
부모 컴포넌트에 있는 데이터를 자식 컴포넌트에 물려주는 것이다.
props는 오직 부모에서 자식방향으로만 props를 전달할 수 있다.
쉽게 읽기 전용 데이터라고 생각하면 될것 같다.
state
컴포넌트 안에서 선언하며 내부에서 값을 변경할 수 있다.
state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다.
useState 활용
const [value, setValue] = useState(초기값) //사용법
// useState를 이용해서 counter 만들기
import React, { useState } from "react";
function App() {
const minus = () => {
setCount(count - 1);
};
const plus = () => {
setCount(count + 1);
};
const [count, setCount] = useState(0);
return (
<div>
{count}
<button onClick={plus}>+</button>
<button onClick={minus}>-</button>
</div>
);
}
export default App;