Component, Router, SASS

React component 만드는법

Hooks 이전

1. 컴포넌트 내부에 상태가 있다면?

• Class

2. 컴포넌트 내부에 상태가 없다면?

• 라이프사이클을 사용해야 한다면? >> class
• 라이프사이클에 관계 없다면? >> function

Hooks 이후

• Class , function 구분x

Class 컴포넌트 만드는법

Babel

JSX 문법으로 작성된 코드는 순수한 JavaScript로 컴파일 하여 사용한다.
사용법

1. CDN 추가

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> 
<script type="text/babel"> 로 설정

왜 JSX를 쓰나요?

• React.createElement vs JSX >> JSX가독성 완승
• bebel과 같은 컴파일 과정에서 문법적 오류를 인지하기 쉬움

JSX 문법

1. JSX는 Javascript의 값이다.
2. JSX 는 자바스크립트의 값을 포함할 수 있다.

  const name = "위코드";
  return <h1>Hello {name}</h1>;

3. JSX안에서 tag의 속성을 정의할 수 있다. >> camelCase에 맞춰 작성, class >> className

4. JSX에서 바로 이벤트리스너를 등록할 수 있다. on + 이벤트 리스너
   onClick={함수} 라는 속성 부여를 하면 된다.

5. inline style >> 자바스크립느 object형태로 inline style을 표현한다.

   const myStyle ={ backgroundColor:"yellow", ...} <h1 style={myStyle})

6. JSX Xclosing JSX에서는 닫는 태그를 반드시 작성해주어야 한다.

7. 모든 JSX태그는 하나의 부모태그로 감싸져 있어야한다.

8. React.Fragment 태그>> 실제 DOM에는 추가되지 않으면서 JSX들을 그룹화하기 위해 사용
   8.1. >> react패키지르 import해주어야함 <></> 이렇게 표현할 수 있다.

   SPA

   Single page application : HTML이 하나만 있는 어플리케이션
   HTML이 2개 이상 있는 어플리케이션 >> MTL(Multi Page Application)

Routing

• 경로마다 해당 페이지를 브라우저 화면에 출력하는것

• react는 UI를 그리는 라이브러리라 routing기능을 제공하지 않음
  -- routing 기능이 있는 라이브러리를 설치해서 써야한다.
  -- React-Router 라이브러리 사용한다.

설치방법

1. npm install react-router-dom
2. package.json 파일에 dependencies부분에서 react-router-dom 설치확인
3. Router.js 파일을 만든다.(경로 : scr폴더에 index.js와 같은위치)
   /Router.js 기본 서식/
4. import React from "react";
5. import { BrowserRouter, Routes, Route } from "react-router-dom";

const Router=()=>{
  return(
    <BrowserRouter>
      <Routes>
        <Route path=‘’ element={<Main/>}/>
      </Routes>
    </BrowserRouter>
  )
}

export default Router;

2가지 경로이동 방법

요소 클릭해서 경로이동 (Link Component이용)

1. 원하는 페이지의 js파일로 이동
2. Import { Link } from “react-router-dom”;
4. 개발자도구에는 a태그로 변화되어 출력됨
5. 처음부터 a태그를 쓰면 경로를 이동할때마다 HTML을 처음부터 새로 그리지만 SPA는 UI가 바뀐부분만 화면을 다시 그려서 빠른 UI전환을 경험할 수 있는데 처음부터 새로그린다면 SPA의 장점을 살리지 못한 코드가 된다.
6. 프로젝트 외부경로로 이동할때만 a태그를 사용하도록 해야한다.

useNavigate이용

1. Import { useNavigate } from “react-router-dom”;
2. 컴포넌트 내부에서 navigate = useNavigate(); 할당
3. navigate(‘/main’) 이렇게 호출해서 사용가능
4. 위 기능은 이벤트속성과 함께 사용가능
5. useNavigate는 hook이다.
6. hook은 최상당에서만 호출해야한다. 즉 바로 사용하지 않고 변수에 할당해서 사용해야하는 규칙이 있다.

SASS

설치방법

1. npm install sass 입력
2. dependencies에서 설치 확인
3. .css 대신 .scss확장자명을 사용한다.

사용법

1. scss는 valuer값을 변수에 담아 사용할 수 있다. 변수는 최상단에서 선언되어야 한다.
2. 변수는 $변수이름: value; 형태로 선언된다.
3. $변수이름을 사용하고싶은 value에서 쓰면 된다.
4. hover와 같은 가상클래스나 가상요소선택자 선언방법 > &사용

color: red;
&:hover{
	color:blue;
	}
border.......

5. &기호는 className의 접속사로도 사용될 수 있다.
   만약 className이 article과 article_box라는 클래스가 있다면

.article {
	color: red;
	&_box{
		color:blue;
		}
	}

6. @mixin 용법
   한번에 같이 쓰이는 속성들을 묶어 변수에 저장하는 방법이다.

@mixin flex{
	display: flex;
	justify-content: center;
	align-items: center;
	}
~~~~~~~~~~~~~~~~~~~~~~~~
.article {
	@include flex;
}

다음과 같이 인자를 사용할 수도 있다.

7. @import를 통해 다른 scss파일에서 정의한 @mixin변수를 불러올 수 있다. mixin변수만을 모아둔 scss를 따로 만들어 관리할 수 있다.

   SASS vs CSS