React
react
웹이 발전하면서 처리할 데이터와 상호작용의 규모가 커졌고,
그 복잡성을 해결하기 위하여 프레임워크와 라이브러리의 필요성이 커지게 되었다
프레임워크: 틀(코드)이 제공된다. 내가 틀에 맞춰야 한다
라이브러리: 기능(코드)이 제공된다. 기능을 나에게 맞게 사용할 수 있다
서드파티 라이브러리: 편하고 효율적인 개발을 위해, 플러그인이나 라이브러리 또는 프레임워크등을 사용하게 된다node & npm
리액트도 하나의 패키지이므로, 리액트의 실행을 위해서 node와 npm의 설치가 필요하다
pakage.json에 명시된 패키지들은 npm install로 한 번에 다운로드 할 수 있다
react
MVC(Model-view-controller) Architecture인 Angural, Vue와 다르게
리액트는 오로지 view만을 담당한다
Virtual Dom(가상 돔)을 통해 UI를 업데이트한다
선언적이며 컴포넌트 기반이라는 특징을 가진다
절차적(명령형): How 중심, 원하는 결과를 만들기 위한 절차를 모두 프로그래밍 하는 방식
선언적: What 중심, 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍 하는 방식
Virtual Dom: DOM의 변화을 미리 계산하기 위한 가상의 DOM
컴포넌트(component): 재활용 가능한 UI 구성 단위. 이름이 대문자로 시작해야 한다
클래스형 컴포넌트: 초기에 많이 사용되었으나, 복잡하다는 단점이 있다. render함수를 필요로 한다
함수형 컴포넌트: 직관적이고 사용하기 쉽다. react Hook의 추가 이후로 주로 사용된다CRA
Create-React-App
리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 툴체인 중 하나이다
바벨, 웹팩 등 리액트 어플리케이션 실행에 필요한 다양한 패키지가 포함되어 있다
SPA
CRA는 SPA라는 특징을 가진다.
따라서 프로젝트당 하나의 HTML파일을 가진다
SPA는 페이지 전체를 새로고침 하지 않음으로써 화면의 딜레이를 줄인다
(SPA에서의 페이지는 HTML파일을 뜻한다)
⭐️CRA의 구성
public폴더의 index.html: 메인 페이지
src폴더의 App.js: 화면을 그리는 코드가 작성되는 컴포넌트 파일
src폴더의 index.js: App.js와 index.html을 연결해주는 파일
CRA 설치 방법
CRA 설치
1. npx create-react-app 폴더명
2. cd 폴더명
3. npm run start(3000번 포트로 리액트 서버 실행)툴체인
react와 필요한 도구들을 미리 설정해둔 조합
Creat React App, Next.js, Gastsby 등이 있다
JSX
JSX:
Javascript Syntax Extension
react용으로 만들어진, JS내에서 사용하는 HTML과 유사한 문법
JSX의 특징
- JSX는 js의 값을 사용할 수 있으며, js값은 중괄호와 함께 사용한다
{ 변수명 }// ⚠️ 이 때, 문자열 사이에 변수를 넣고 싶다면 템플릿 리터럴을 사용할 수 있다
return(
{`text1${변수}text2`}
)
- if문, for문 등은 값이 아니므로 JSX에서 사용할 수 없다
- HTML 속성을 정의할 수 있다. 카멜 케이스를 사용한다
- class대신 className을 사용한다
- JSX에서 이벤트 리스너를 정의할 수 있다.
<태크 on+이벤트명={콜백 함수}></태그> - inline style을 가지며, style 속성들을 객체로 정의한다
<div style={{color : "red"}}>Hello React</div> - 태그를 클로징 해줘야만 한다
<태그></태그>
<태그 />- 모든 JSX태그는 하나의 부모 태그로 감싸져 있어야 한다
- import시 React.Fragment태그를 사용할 수 있다. DOM에 적용되지 않는다.
<React.Fragment></React.Fragment>
<></>⭐️함수형 컴포넌트 작성 예시
//컴포넌트.js
function 컴포넌트명() {
return (
<>
HTML 내용
</>
);
}
export default 컴포넌트명;
// 컴포넌트의 body부분에 코드(사이드 이펙트)를 작성하면, 랜더링이 될 때마다 실행이 되어 성능의 저하를 불러온다
// 따라서 body부분에서 코드(사이드 이펙트)를 사용할 때에는 useEffect를 사용한다//index.js
import 컴포넌트명 from './파일명'
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<컴포넌트명 />);React router
SPA: Single Page Application
Routing: 다른 경로(url)에 따라 다른 view(화면)을 보여주는 것
react-router 설치
npm install react-router-dom --save⭐️router 연결 예시
import { BrowserRouter, Routes, Route } from "react-router-dom";
import 페이지명1 from "파일 경로";
import 페이지명2 from "파일 경로";
function Router() {
return (
<BrowserRouter>
<Routes>
<Route path="/url1" element={<페이지명1 />} />
<Route path="/url2" element={<페이지명2 />} />
</Routes>
</BrowserRouter>
);
}
export default Router;a태그, Link태그, useNavigate() 비교
<a>: 외부 사이트로 이동
<Link />: 프로젝트 내의 컴포넌트로 이동, 클릭시 바로 이동하는 로직에 사용
useNavigate(): 프로젝트 내의 컴포넌트로 이동, 페이지 전환 시 추가로 처리해야 할 로직이 있는 경우 사용Link태그 사용 방법
1. import { Link } from "react-router-dom";
2. <Link to="/url"> text </Link>useNavigate 사용 방법
1. import { useNavigate } from "react-router-dom";
2. HTML 태그를 리턴하기 전 변수, 함수 선언하기
const navigate = useNavigate(); // ⚠️ 변수에 할당해야 useNavigate를 사용할 수 있다
const function movePage = () => {
navigate("/url");
}
3. return 해줄 HTML태그에서 on+event = {movePage} 속성을 추가하여 사용하기Sass(SCSS)
Sass: CSS의 단점을 보완하기 위해 만든 CSS 전처리기
Sass 설치
npm install sass --save설치 이후, css확장자를 scss로 변경(import구문도 변경 할 것)
Sass의 특징
Nesting: 속성을 추가할 태그를 다중 객체로 구조화 할 수 있다
mixin:
변수 활용 가능:
$변수명: 속성값;& 연산자 활용 가능: :hover 등의 가상선택자를 대체할 수 있다
kodeKata
22.10.17
const twoSum = (nums, target) => {
for(let i = 0; i < nums.length; i++){
for(let k = i + 1; k < nums.length; k++){
if(nums[i] + nums[k] === target){
return [i, k]
}
}
}
}
console.log(twoSum([14, 11, 4, 9], 13))
22.10.18
const reverse = x => {
x = String(x);
answer = "";
for(let i = x.length - 1; i >= 0; i--){
answer += x[i];
}
if(answer.includes('-')) return - parseInt(answer)
else return parseInt(answer)
}
console.log(reverse(-1234033))