출처 https://networksynapse.net/tag/react/

emotion

css를 js로 만들 수 있도록 도와주는 라이브러리

styled 함수

import styled from "@emotion/styled";

이전방식

div태그를 만들고, 클래스 이름이나 id 값을 설정한 후에
css 파일에
선택자 {
    적용시킬 디자인;
}
으로 작성을 했음
--> 클래스이름 및 아이디 이름 설정의 어려움
--> 선택자를 똑같게 설정했을 경우 의도치 않은 스타일이 적용

emotion styled 방식

css가 적용된 유일한 div 태그를 만들면 되지 않나?

let Abc
const Abc = styled.div`css문법;`;   // 아래와 동일
const Abc = styled.div('display:flex;');
Q. 함수 실행 결과? <div style="display:flex;"></div>
                    js가 아니라 jsx가 나온다!

.js 파일에서
let a = <p>안녕</p> --> jsx
<a></a> 

d01emotion.js

import styled from '@emotion/styled';

function EmotionComponent(){
  return(
      <Wrap>
          <Title>이모션</Title>
              <p>이모션을 활용하여 css가 적용된 컴포넌트를 사용</p>
          <Title>다시 사용</Title>
      </Wrap>
  );
}

const Wrap = styled.div`
  border: 3px solid black;
  width: 800px;
  margin: 0 auto;

  & p {
      background-color: aqua;
  }

  &:hover{
      background-color: pink;
  }
`;

const Title = styled.h1`
  font-size: 20px;
  color: aqua;
`;

export default EmotionComponent;

javaScript template 함수

1. `이렇게 해주면 안에
    엔터 마음대로 칠 수 있음
    오굿!!`

2. 앞에 있는 함수(myTag)를 실행 시켜줘! 라는 뜻
    ex) var output = myTag`that ${person} is a ${age}`;
    
    ex2)function banana(a, b, c, d){
        .....;
        a[0]; // 'abc'
        a[1]; // '5+1'
        a[2]; // 'dd'
        }

    banana`abc${13-7}5+1${true}dd${10 > 1}`;
    banana`abc${6}5+1${true}dd${true}`;
    banana(['abc', '5+1', 'dd'], 13-7, true, 10>1)

페이지 이동

애초에 React는 Single Page Application
(html 파일이 하나밖에 없기 때문에)이기 때문에
페이지 이동이라는 개념 자체가 존재하지 않는다
따라서 주소가 안바뀌고, 뒤로가기 앞으로가기 불가능하다

불편하니 누군가는 만들어놨을꺼다. 뭐를? 라이브러리를

React-Router-Dom

페이지 이동효과를 주기 위해 자주 사용되는 라이브러리
새로나온 6.4 버전
페이지 이동은 아니고,
단순히 주소에다가 글자를 추가해주고,
뒤로가기(history)에 이전 기록을 추가해주는 방법으로
사용자 입장에서 페이지 이동이 된 것 처럼
효과를 낼 수 있다

html의 a태그는 절대 리액트에서 사용하지 않는다
a태그의 동작 원리 자체는
href 속성에 있는 주소로 이동을 시켜버리는 행위이기
때문에 페이지가 하나밖에 없는 리액트에서는
제대로 동작하지 않는다

Link 컴포넌트 (react-router-dom) // 다른 사람이 만들어놨으니 import 해야겠네?!
<Link to='경로'>소개로 이동</Link>
ex)
<Link to='/about'>소개로 이동</Link>

d02router.js

import {Link} from "react-router-dom";
const RouterPage = () => {
return (
<>
    <h1>라우팅</h1>
    <p>리액트에서 라우팅 하는 방법</p>
    <Link to="/abc">소개로 이동</Link>
</>
);
}
export default RouterPage;

만약 사용자가
"소개로 이동"을 클릭하면
브라우저의 주소에다가
/about 을 붙여준다(실제로 그 페이지로 이동하는 것이 아니라),
그리고 기존에 보여졌던
화면은 지워주고, history에 기록을 저장한다
그리고 화면에는 다른 컴포넌트가 렌더링이 된다

1. 가장 최상위 컴포넌트(보통은 index.js안쪽이나 app.js)에다

<BrowserRouter>
    <Routes>
        <Route path:'/' element={<컴포넌트/>}/>
        <Route path:'/aaa' element={<컴포넌트/>}/>
        <Route path:'/bbb' element={<컴포넌트/>}/>
        <Route path:'/ccc' element={<컴포넌트/>}/>
    </Routes>
</BrowserRouter>

2. createBrowserRouter([{path:'/', element:<컴포넌트/>},{},{},{}])

함수를 직접 사용하여 browserRouter를 직접 만들고,
해당 라우터를

<RouterProvider router = {이곳} />

에 직접 넘겨준다

잘못된 주소를 입력했을때 나오면 좋을 에러페이지 예시

d03err.js

import {useRouteError} from "react-router-dom";

const ErrorPage = ()=>{
 // 함수 실행 결과는 객체
 // 오류에 대한 다양한 정보들이 들어있는 객체
 // statusText 혹은 message 등등의 key값이 있는 객체

 let aaa = useRouteError();

 return (
     <div>
         <h1>죄송합니다! 해당 페이지는 찾을 수 없어요</h1>
     </div>
 );
}

export default ErrorPage;