[Day 47] React Exercise

리액트 실습

환경변수 설정

CRA를 사용하는 앱에서 환경변수이름은 앞에 REACT_APP을 붙여야만 인식한다.

Presentational Component

PC에서 받는 데이터는 서버에서 보내주는 데이터에 대한 의존성이 없어야 한다.

PC의 사용법은 가장 간단하게 유지하는 것이 좋다.

render() {
  const { products, loading } = this.state;
  // products를 받아서 해당 데이터 객체의 key값을 원하는 형태로 바꿔준다.
  const productsList = products.map(p => ({
    id: p.id,
    title: p.title,
    imgURL: p.mainImgUrl,
  }));
  return <ProductListView products={productsList} loading={loading} />;
}

UI에서 화면만 바꿔주기 위한 상태들 (멀리 퍼져나가지 않는 상태들)은 PC에 둬도 괜찮다.

Select Input

리액트에서 select 요소의 첫번째것이 선택되어 있는 PlaceHolder를 만들기 위해서는 selected 속성을 주지말고 value나 defaultValue를 사용하는 것이 좋다.

• option의 value를 빈 문자열로 넣고, 초기 상태도 빈 문자열로 맞춰준다.

리액트에서 input, select, textarea 요소의 value에 null을 넣으면 제어되지 않는 컴포넌트로 작동하기 때문에, 제어되는 컴포넌트로 쓸려면 value에 null이 들어가지 않게 해줘야 한다.