[React.js] 프로젝트를 하며 배운 것들

습관 만들기 😤

컴포넌트 안에서 정의한 state 오브젝트(데이터를 관리하는 저장소라고 생각한다)
state는 얕은 비교를 한다.
최상위 오브젝트의 참조값이 변하지 않으면 render 함수를 호출하지 않는다.
setState 함수를 이용해서 새로운 상태의 오브젝트(업데이트 하고자 하는 상태 데이터)를 인자로 전달해 주어야 한다.
setState 함수는 비동기 API이다.
state 안의 데이터를 직접 수정하지 마!
setState 함수는 비동기 API이기 때문에 직접 state를 여러번 수정하는 경우 이전 데이터의 업데이트가 덮어 씌워질 수가 있고 예상치 못한 버그🪲가 생길 수 있다.(사실 이건 어떤 경우에 버그가 생기는지, 경험이 부족한 것인지 아직 이해를 잘하지 못했다.)
setState 함수는 두 가지 방법이 있다.
1. setState(newState) - 새로운 state 오브젝트를 인자로 바로 받는 함수
2. setState(prevState => { return newState; }) - 이전 state를 받아서 그걸로 계산해서 새로운 state를 리턴하는 함수를 인자로 받는 함수


handleAdd = (name) => {  
	const habits = [...this.state.habits, { id: Date.now(), name, count: 0 }];  
	this.setState({ habits }); 
};

PureComponent는 얕은 비교를 한다.
라이프 싸이클 메소드 중 하나인 shouldComponentUpdate()가 기본 수행되며 이 메소드는 최상위 오브젝트의 참조값이 변하지 않으면 render 함수를 호출하지 않는다.
일반 Component는 setState 함수가 호출되면 무조건 render 함수를 호출한다.
PureComponent를 사용함으로써 불필요한 렌더링이 되는 것을 줄일 수 있다.

React.Component 클래스를 상속
데이터는 this.state에서 관리
render() 함수에 HTML과 비슷한 JSX 문법을 이용해서 UI 표기
- 클래스 특성상 클래스의 인스턴스(실제 메모리에 저장된 값)가 생성이 되면 메소드(함수)가 아무리 많이 호출이 되어도 직접 수정하지 않는한 멤버 변수는 한 번 만들어지면 그 값이 유지가 된다.
- 따라서 render 함수가 아무리 많이 호출이 되어도 this.state의 데이터는 변하지 않기 때문에 데이터를 일정하게 관리할 수 있다.

props만 받아서 보여주는 페이지나 state, props 둘 다 없는 정적인 페이지를 보여줄 때 간단하게 만들 수 있다.
React.memo를 통해 PureComponent처럼 렌더링 최적화를 할 수 있다.
클래스와는 반대로 함수의 특성상, 함수를 호출할 때마다 함수의 코드 블럭이 다시 실행이 되고, 그 안에 선언한 모든 지역변수들은 함수의 실행 컨텍스 안에서 재정의, 값이 재할당 되어진다.
따라서 컴포넌트 안에서 state를 가질 수 없다!
하지만 React Hooks가 있는걸?
- 비교적 최근에 추가된 기능(16.8v)으로 class component처럼 state와 라이프 싸이클 메소드를 사용할 수 있다! 👏 [link to Hooks!](https://reactjs.org/docs/hooks-state.html)
function component는 `this.`를 사용하지 않아도 되고 중복되는 코드를 줄일 수 있다는 것에 장점이 있다!