간단정리

PureComponent → 원래는 컴포넌트가 업데이트시 모든 컴포넌트 업데이트 됨
PureComponent 를 사용하면 “변경된컴포넌트” 만 업데이트 해줌

Lifecycle → 컴포넌트 업데이트 전이나 업데이트 하고난뒤 뭐 해주고싶어 !! ex 로딩바

functionComponent → 기존에 컴포넌트를 class 형식으로 생성했지만 function 으로도 생성할 수 있다

단점은
“동적” 이라서 데이터가 변동되는 컴퍼넌트는 불가능
장점은
함수형태라 this 를 안써도 됨

ReactHook → function 컴포넌트로
컴퍼넌트를 만들면 “동적” 으로 밖에 안된다고 했는데
React Hook을 이용하면 classComponent처럼 “정적” 으로 만들어줄 수 있다.

사용법은 간단하다

기존 클래스컴퍼넌트에 사용한 this.state 를 → const [cont, setCount]=useState(초기값); 로 사용법을 바꿔주자

변경도 비슷하다

setState(변경할 거)→ setCount (변경할 거)

아니 그럼 class 형식 말고 function + 훅 쓰면 되는데 왜 클래스컴퍼넌트 까지 배워야하지?

• Hooks도입된지 얼마안됨 기존에 만들어진 프로젝트 코드 들은 대부분 클래스 컴퍼넌트 형식으로 만들어져있을 확률 매우높음
• Hooks 쓰는 건 취향차이라 모두가 Hooks을 쓰진않음 그래서 클래스 형식이랑 펑션형식 둘다 알아둬야함

State를 직접적으로 수정하면 안되는 이유

• 사실 어떤 프로그래밍에서도 오브젝트를 직접적으로 변경하는것은 좋지않다.

• 예상치 못한 오류가 발생하는 것을 피하기 위해 이미 만들어진 오브젝트는 항상 불변성을 유지하는게 좋다

왜? 매번 귀찮게 새로운 오브젝트를 만들어야함 ? 그럼 코드양도 길어지는데

setState는 비동기적으로 동작

• State를 직접 수정하면서 여러번 상태를 업데이트 하는 경우 이전 업데이트 내용이 다음 업데이트 내용으로 덮어 쓰여질 수 있다.

• 비동기 특성으로 인해 예상치 못한 순간에 버그가 발생할 수 있는 위험이 있다

PureComponent에서 정상적으로 동작 하지 않는다

• 현재 컴포넌트가 가지고 있는 상태 (this.state), 와 새로운 업데이트 해야하는 상태 (setSate 함수의 인자로 전달된 새로운 오브젝트)

• 두개를 비교해서 업데이트가 필요한 경우 해당 컴포넌트의 render함수를 호출함

• 직접적으로 변경하면 비교해야 되는 대상이 동일하므로 리액트는 업데이트 할 필요가 없다고 판단해서 render 함수를 호출해 주지 않는다.