1. 라이프 사이클
라이프사이클은 리액트가 가상돔을 사용하기 때문에 가상돔이 생겼다가 없어지는 과정을 라이프사이클이라고 말합니다.
가상돔이란 진짜돔을 그대로 복사해서 가지고 있다가 변확 생기면 가상돔에서 변화를 인지하고 변화가 완료되면 진짜돔에 변경된 부분만 적용하는 역할을 하고 있습니다.
일만 DOM 명령어를 사용하다가는 에러가 발생합니다.
라이크사이클은 Mount,update,Unmount 세부분으로 나뉠 수 있습니다.
각각의 하는 역할이 있습니다.
- Mount
컴포넌트가 로딩되는 것. - Update
컴포넌트에 변화를 적용하는 것. - Unmount
컴포넌트를 삭제 하는 것
리액트의 class형 함수들을 살펴보면 라이프사이클의 이해에 도움이 됩니다.
- componentDidMount
초기 컴포넌트의 로딩이 끝났을 때에 사용되는 라이프사이클 메소드 입니다. 이 부분에서 대부분 DOM조작을 하거나 로딩 이후에 확인해야 하는 작업들을 수행합니다. - componentDidUpdatek
state나 props가 업데이트 되었을 때
강제 업데이트를 일으겼을때 에만 수행된다는 점 입니다. - componentWillUnmount
말그대로 삭제할떄 사용됩니다.
2. 선언방식
리액트는 컴포넌트를 만들때 두가지 방식으로 컴포넌트를 선언한다.
클래스형
state, lifeCycle 관련 기능사용 가능하다.
메모리 자원을 함수형 컴포넌트보다 조금 더 사용한다.
임의 메서드를 정의할 수 있다.함수형
state, lifeCycle 관련 기능사용 불가능 [Hook을 통해 해결 됨]
메모리 자원을 함수형 컴포넌트보다 덜 사용한다.
컴포넌트 선언이 편하다.
3. React Hook
Hooks 는 리액트 v16.8 에 새로 도입된 기능이며, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해, 기존 함수형 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해줍니다.
리액트훅 간략한 설명
-
useState
useState는 가장 기본적인 Hook입니다,
함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며, 함수형 컴포넌트에서 상태를 관리해야 할 때 사용합니다. -
useEffect
useEffect는 클래스형 컴포넌트의 componentDidMount 와 componentDidUpdate 를 합친 형태라고 생각하면 될 것 같습니다.
랜더링 될때마다의 특정 작업을 할 수 있도록 도와줍니다.
React.useEffect(()=>{},[])화살표 함수 뒤에 오는[]를 데펜더시라고 하는데, 이곳을 비워두면 렌더링될때, 한번만 실행을 합니다.
어떠한 값이 변할때만 실행하고자 하면 [값][]안에 해당 변수를 넣으주면 됩니다.
useReducer
useReducer는 useState보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트 해주고 싶을 때 사용하는 Hook입니다. (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 state를 반환합니다. 하윗값이 복잡한 정적 로직을 만들거나, 다음 state가 이전 state에 의존적인 경우 보통 useState 대신 useReducer를 사용한다. 또한 useReducer는 자세한 업데이트를 트리거 하는 컴포넌트의 성능을 최적화 할 수 있는데, 이것은 Callback 대신 dispatch를 전달할 수 있기 때문입니다.
