react

SPA에서 화면 변경은 어떻게?

• HTML 5 의 History API 를 사용해서 한다.
  세션 관리!
  

react-router-dom

npm install react-router-dom --save
--save 해주면, package.json 에 추가가 됨.

rfce

vscode 창에 rfce 하고 enter 하면 자동으로 export 가 되는 function을 만들어주게 하는 법!

요거 설치해주면 됨.

CSS Framework

• 기능을 만드는데 더 집중하기 위해!!
  

React Bootstrap

https://react-bootstrap.github.io/

다양한 기본 컴포넌트들을 import 해서 쉽게 사용 가능!
(Button, Modal 등등)

설치
npm install react-bootstrap bootstrap --save

<index.js>
import "bootstrap/dist/css/bootstrap.min.css";
추가

Clayful

backend 연동 솔루션 서비스! (다양한 커머스를 지원해주는!)

npm install clayful --save
npm install axios --save

import clayful from "clayful/client-js";
import axios from "axios";

clayful.config({
  client: "TODO Client Token",
});

clayful.install("request", require("clayful/plugins/request-axios")(axios));

AuthContext

Context가 많아질 거기 때문에, 따로 Context들을 분리!

const AuthContextProvider = ({ children }) => {
  const [isAuth, setIsAuth] = useState(false);
  const navigate = useNavigate();

  const AuthContext = createContext();

  const signOut = () => {
    setIsAuth(false);
    localStorage.removeItem("accessToken");
    navigate("/login");
  };
  const isAuthenticated = () => {
    return;
    var Customer = clayful.Customer;
    let options = {
      customer: localStorage.getItem("accessToken"),
    };
    Customer.isAuthenticated(options, function (err, result) {
      if (err) {
        console.log(err.code);
        setIsAuth(false);
        return;
      }
      var data = result.data;
      if (data.authenticated) {
        setIsAuth(true);
      } else {
        setIsAuth(false);
      }
    });
  };

  const AuthContextData = {
    isAuth,
    isAuthenticated,
    signOut,
  };
  return (
    <AuthContext.Provider value={AuthContextData}>
      {children}
    </AuthContext.Provider>
  );
};

export const AuthContext = createContext();

이런식으로 children 을 들고와서, 내부적으로 감싸주고

• value 값은 AuthContextData 로 묶어주기
• 적절히 필요한 기능들 구현

사용은 이런식으로 하면 됨.

기타

<React.Fragment> </React.Fragment>
<></>
위 아래 같은 거임

dangerouselySetInnerHTML

dangerouslySetInnerHTML 은 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대채 방법.

react-bootstrap

Container, Row, Col 잘쓰면 반응형 대박!