React

장점

 사용자 경험이 좋아진다.

• 웹에서 앱과 같은 사용자 경험을 만들어 줌.
  • single page application여서 화면 이동 간 깜박임이 없음.

컴포넌트 단위

• 중복되는 요소들을 하나로 묶어줄 수 있다. 따라서 유지보수가 쉬워진다.

데이터-화면 동기화를 알아서 해준다.

• 기존에는 데이터를 화면과 동기화시키는 것이 어려움.

개발자 도구에서 data 상태를 알 수 있음

문법적 특징

• JSX : JS + XML(태그)
  • 반복문은 map을 사용
  • 삼항연산자 사용 가능

{
	this.state.result.length === 0
		? null
		: <div>평균 시간 : {this.state.result.reduce((a, c) => a+c) / this.state.result.length}ms</div>
}

•  
  • 부호 연산자 사용 가능

{
	this.state.result.length !== 0
		&& <div>평균 시간 : {this.state.result.reduce((a, c) => a+c) / this.state.result.length}ms</div>
}

• babel : 실험적인 문법(js안에서 html문법을 쓸수 있는)을 쓸 수 있게 해줌.
  • babel이 JSX문법을 JS가 이해할 수 있게 변경해준다.

 

렌더링

• state, prop의 값이 변경될 때 렌더링이 발생

불변성 체크

예전 state와 지금 state의 참조가 변경되어야 render가 실행된다.

// 렌더링 안됨
const arr = [];
arr.push(1);
// 이렇게 해야 렌더링함
const arr1 = [];
const arr2 = [...arr1, 1];
arr1 === arr2; // false

렌더링 최적화

성능 문제 발생 원인

• state나 prop가 자주 변경되면 또는 쓸데없이 변경되면 성능에 영향을 끼칠 수 있다.
• 컴포넌트는 자신의 state가 변경되거나, 부모에게서 받는 props가 변경될 때마다 리렌더링된다.
  • 하위 컴포넌트에 최적화 설정을 하지 않으면 부모에게서 받는 props가 변경되지 않았더라도 리렌더링되는 것이 기본이다.

렌더링이 자주 일어날때 문제를 찾는법

• 개발자 도구 > React > 설정(톱니바퀴) > "Highlight updates when components render."에 체크.
  • 렌더링될때마다 화면이 반짝거린다.
    • 색상 : 렌더링이 많이 일어날 수 록 점점 색깔이 빨개짐. (파 > 초 > 노 > 빨)

최적화 방법

1. state 내 변수 변경 여부를 직접 구현 가능 : PureComponent
2. 복잡한 함수를 캐싱(useMemo, useCallback)

그 외 알게된것들

리로딩과 핫 리로딩

• 리로딩 : 새로고침. 웹팩 데브 서버가 변경을 감지하면 새로고침을 시킴.
  • 단점 : 기존 데이터가 날라감. 다시해야함
• 핫 리로딩 : 기존 데이터를 유지하면서 화면을 변경함.
  • 에러찾기 좋음

리덕스

• 여러 컴포넌트에서 쓰이는 공통적인 데이터 관리
• dev tool
  • 이력 관리