[2021.08.02] React Foundation 2

📌 1.企業の課題の回顧

💡 定数管理(「配線」ページのpathも定数管理)

class AppRouter extends Component {
  render() {
    return (
      <Router>
        <Route exact path={ROUTES.HOME}>
          <Home />
        </Route>
        <Route exact path={`${ROUTES.PRODUCT}/:id`}>
          <Product />
        </Route>
        <Route exact path={ROUTES.RECENT_LIST}>
          <RecentList />
        </Route>
      </Router>
    );
  }
}
// src/constants/routesPath.js
const ROUTES = {
  HOME: '/',
  RECENT_LIST: '/recentList',
  PRODUCT: '/product',
};

export default ROUTES;

💡 Design

💡 Storage Class

💡 url設計

💡 構成部品ファイル名

💡 クラスコンポーネントのライフサイクルメソッド

class Home extends Component {
        _isMounted = false;

	async componentDidMount() {
	    this._isMounted = true;
	    const notInterested = getNotInterested();
	    const products = await getJsonData();
	    this._isMounted &&
	      this.setState({
	        products: products.filter(
	          product => !notInterested.includes(product.id),
	        ),
	      });
	  }
	
	componentWillUnmount() {
	  this._isMounted = false;
}

💡 注目点の分離

handleCheckNotInterest = (e) => {
    const checked = e.target.checked;
    if (checked) {
      this.setState({isCheckNotInterest: true});
    } else {
      this.setState({isCheckNotInterest: false});
    }
  };

💡 Reactではグローバル変数を記述する必要はほとんどありません。

export const NO_INTERRESTED = "no_Interested";
export const WATCH = "watch";
export let RESET_DATE = new Date();

export const setLocalStorageProducts = (watch, product) => {
  const initStorage = JSON.parse(localStorage[watch] || "[]");
	// 생략...
  RESET_DATE = new Date();
  const date = getFormatDate(RESET_DATE, "YYYYMMDDHHMISS");
  const data = { ...product, date };
	// 생략...
};

💡 ReactではDOMに直接アクセスする必要はほとんどありません。

componentDidMount = () => {
    const htmlTitle = document.querySelector("title");
    htmlTitle.innerText = '최근이력 페이지';
}

💡 参考資料

📌 3. Class/Functional Component

Class vs. Functional

📌 4. Frontend Libraries

📌 5. Agile