수업 정리

- Route 도 상수니까, Constants 폴더에 파일 만들어서 따로 빼서 관리하는 것이 좋다

- 디자인도 왠만하면 따라해보는 것이 좋다, 클래스명 / HTML 구조 / container 를 많이 쓰는지 등등

- Utils 에 JSON.stringify(), JSON.parse() 도 넣어주는 것이 좋다

- 조건문은 가능하면 중첩없이 사용하는 것이 좋다

 

SPA 의 장점은 한 페이지라는 뜻. URL 이 바뀌어도 페이지는 그대로인데, JS 가 DOM 을 바꿔서 깜빡임이 없는 게 정상

 

- URL 설계는 간략히 하기

- 컴포넌트 파일명은 습관적으로 대문자, 카멜 케이스. 소스코드나 Utils 안에 변수, 함수 다 들어가니까 뭐가 컴포넌트인지 아닌지 구분하다 보니 그렇게 사용하게 됨

- jsx 확장자도 jsx 문법이 포함되었다고 보여주기 위함이니까 js 로 그냥 사용해도 됨

 

- async 는 비동기라는 뜻. 해당 작업이 완료된 뒤에 다음작업을 하기위해 붙여주는데, componentDidMount 같은 lifecycle 메소드에 붙이면 의미가 없음. lifecycle 메소드는 호출 당하는 것이기 때문.

 

- 관심사 분리하기. 한 컴포넌트에서는 1가지 일만 하는 것이 좋음. Route 면 Route만. product 정보를 받아와야 하면 그 컴포넌트 내에서 처리해주는 게 나음

- React 내에서 let 전역변수를 사용할 일은 거의 없다

- Constructor 에서 state 초기화 한번 다 정리하고 가면 좋음. products: [] 처럼

 

클래스형 컴포넌트의 특징

- 라이프 사이클이 있다. 컴포넌트가 언제 mount 되고, 언제 update 되고 이런 동작을 해주는 메소드들이 있다. 우리가 호출하는 게 아니라 알아서 호출"당"함

- 함수 호출은 didmount 에서 해주는 것이 좋음

 

Hooks

useState 는 상태를 관리하기 위해,

useEffect 는 Class 형의 Lifecycle 메소드를 담당하고 있음

useRef 는 DOM 의 특정요소에 접근하거나, 유지되는 값. 예를 들어, class 형에서는 render 할 때마다 함수가 호출되니까 변수가 항상 바뀌는데, component 에서 유지해야 하는 상수값이 있다면, useRef 를 사용해서 관리했음

 

- useEffect 에 사용하는 의존성 배열은, 의존성 배열 내 값이 바뀔 때마다 useEffect 가 호출되게 하는데 너무 많으면 성능이 떨어짐

-> 그럴때 많이 사용하는 게 useReducer 같은 것

 

일반 함수이더라도 사용하는 측에서 최소, 최대숫자를 인자로 주게 해서 만드는 게 더 명확할 것임

export const RANDOM_0_99 = () => Math.floor(Math.random() * 99));

 

성능에 영향을 미치는 건 오로지 DOM 조작. state, props 바뀌는 경우 2가지 뿐. 바뀌면 그 때 다시 render 됨

render 를 줄여야 하는데, state 변화를 최소화하거나, 부모에서 props 바뀌었을 때 자식까지 render 되는 거 주의하기 2개 정도

 

라이브러리 사용할 때

1. 구글에 react slider 검색해서 어떤 라이브러리들이 있는지 1차로 살피기 (Top 10)

2. npm 사이트에서 해당 라이브러리의 이번주 다운로드 수, 마지막 배포, 이슈 몇개인지 등등 확인하기 

- 직접 github repository 들어가서 Issue 탭에서 궁금한 것 찾아야 될 수도 있음