[2021.08.02] React Foundation 2

📌 1. 기업과제 Review

💡 상수 관리(➡ Route 페이지에서 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

• 프론트엔드 개발자라면 디자인도 신경쓰자!
• 리액트는 SPA (single page application)인데, FOUC (Flash Of Unstyled Content)이 발생한다면 무언가 이상하게 되고 있다!!

💡 Storage Class

• utils로 깔끔하게 작성

💡 url 설계

• url에 불필요한 정보까지 모두 넣지 말자. id값만 있으면 된다.
  (변경 전)http://localhost:3000/productdetail/prod4/나이키%20윈드러너%20블랙%20L/나이키/60000/false
  (변경 후)http://localhost:3000/productdetail/4

💡 컴포넌트 파일명

• 컴포넌트 파일은 대문자로 시작할 것
• 리액트 CRA로 생성했다면 굳이 jsx를 사용하지 않아도 된다. (어차피 JSX문법을 쓸 걸 아니깐..)

💡 Class Component의 Life Cycle method

• 리액트 클래스 컴포넌트의 라이프사이클을 안다면 아래와 같은 코드는 사용하지 말아야 한다.
  : 리액트 라이프 사이클에 의해 실행될텐데 _isMounted 변수를 굳이 생성해서 componentDidMount, componentWillUnmount 시 사용 해야할 이유가 없다!

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;
}

💡 관심사의 분리

• App.js에 Routes에 관해 길게 작성하지 말고 Routes 정보는 Routes.js에 따로 분리하자

💡 ! 연산자 활용

• if-else문을 줄이고 보기 쉬운 코드로 바꿔야 한다
  this.setState({isCheckNotInterest: !checked})

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

💡 React에서 (모듈 내) 전역변수를 쓸 일은 거의 없다.

• 아래와 같이 쓰면 안된다는 예시를 보여주셨다.
  ➡ 모듈 내에서 전역변수를 쓸 일도 없지만, new Date()를 굳이 상수로 관리해야할 필요가 없다.

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을 직접 접근할 일이 거의 없다.

• 리액트에서 직접적인 DOM 접근은 최소화 해야함.

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

💡 참고 자료

> AirBnb 자바스크립트 코드 컨벤션

📌 3. Class/Functional Component

Class vs. Functional

• 왜 Functional인가?
  ➡ 새롭게 개발해야한다면 functional로 개발하자!

• 왜 Class도 공부해야 하는가?
  ➡ 아직도 많은 회사들은 class로 개발된 코드를 가지고 있다.

📌 4. Frontend Libraries

• 라이브러리 선정 기준 / 주의점 / 오류 확인
  ➡ 구글에서 해당 라이브를 검색(구글에서 제시하는 순서대로 봐보자)
  ➡ npm에 들어가서 얼마나 다운로드가 활발하지, 마지막 업데이트가 언제인지 확인해보자!

• 실무에서 라이브러리를 적용하려면?
  ➡ 라이브러리를 설치해서 진행한다면 버전이 업데이트 될때마다 회사에서는 관리를 해야하기 때문에 되도록 직접 구현하려고 한다.

📌 5. Agile

agile : 1. 날렵한, 민첩한 2. (생각이) 재빠른, 기민한

• 짧은주기의 개발단위를 반복하여 하나의 큰 프로젝트를 완성해 나가는 방식이다.
  ➡ 이제는 폭포수 기법 처럼 설계>디자인>개발>테스트>배포 이렇게 간단히 끝나지 않는다!

• 애자일의 핵심은 협력과 피드백이다.
  ➡ 플래닝 미팅, 데일리 스탠드 업, 칸반보드를 통해 공유하고 협력하자