이번주에 배운 내용은 LifeCycle과 리액트 hooks에 관한 내용이다.
라이프사이클(클래스형 vs 함수형), React hooks
리액트의 컴포넌트는 라이프 사이클을 가진다.
예전에는 라이프 사이클을 관리하기 위해서 주로 클래스형 컴포넌트를 사용했다.
현재는 리액트팀에서 함수형 컴포넌트로 바꾸라고 하는 추세다.
함수형 컴포넌트에서는 LifeCycle의 기능을 가지고 있는 React Hook을 사용한다.
하지만, 아직도 클래스형 컴포넌트를 사용하는 기업들이 있으므로,
유지보수를 위해 클래스형 컴포넌트에 대해 알고 있어야한다.
클래스형 컴포넌트
import React, {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
export default App;클래스 컴포넌트 사용 방법
- class 키워드 필요
- Component로 상속 받아야 함
- render() 메소드가 반드시 있어야한다.
LifeCycle API
컴포넌트가 DOM 위에 생성되기 전 후 및 데이터가 변경되어
상태를 업데이트하기 전 후로 실행되는 메소드들이다.
- 생성될 때 (마운트 될 때 - mount): 컴포넌트의 인스턴스가 생성되어, DOM에 삽입될 때 순서대로 호출된다.
- constructor()
컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드
this.props, this.state에 접근할 수 있으며 리액트 요소를 반환한다.
setState를 사용할 수 없으며 DOM에 접근해선 안된다. - getDerivedStateFromProps()
props에 있는 값을 state에 동기화 시킬 때 사용하는 메서드 - render()
UI를 렌더링하는 메서드 - componentDidMount()
컴포넌트가 웹 브라우저 상에 나타난 후 즉 첫 렌더링을 마친 후에 호출하는 메서드
라이브러리나 프레임워크의 함수를 호출하거나 이벤트 등록, setTimeout, setInterval과 같은 비동기 작업을 처리하면 되고, setState 호출도 이 메서드에서 호출하는 경우가 많다.
- constructor()
- 업데이트할 때: props나 state가 변경되면 렌더가 진행되며 순서대로 호출된다.
- getDerivedStateFromProps()
이 메서드는 마운트 과정에서 호출되며, 업데이트가 시작하기 전에도 호출된다.
props의 변화에 따라 state 값에도 변화를 주고 싶은 경우에 사용한다. - shouldComponentUpdate()
props또는 state를 변경했을 때, 리렌더링을 시작할지 여부를 지정하는 메서드
true를 반환하면 다음 라이프사이클 메서드를 계속 실행하고,
false를 반환하면 작업을 중지한다. - render()
컴포넌트 리렌더링 - getSnapshotBeforeUpdate()
컴포넌트 변화를 DOM에 반영하기 바로 직전에 호출하는 메서드 - componentDidUpdate()
컴포넌트 업데이트 작업이 끝난 후 호출하는 메서드
- getDerivedStateFromProps()
- 제거할 때 (마운트 해제 될 때 - unmount): 컴포넌트를 DOM에서 제거하는 과정
- componentWillUnmount()
컴포넌트를 DOM에서 제거할 때 실행한다.
이후에 컴포넌트는 다시 렌더링 되지 않으므로, 여기에서 setState()를 호출하면 안된다.
- componentWillUnmount()
함수형 컴포넌트
import React from 'react';
import './App.css';
function App() {
const name = 'react';
return <div className = "react">{name}</div>
}
export default App;클래스형 컴포넌트 보다 더 간결하게 코드를 작성할 수 있다.
함수형 컴포넌트에서는 React Hook을 사용하여 클래스형의 LifeCycle 기능을 구현할 수 있다.
React Hooks(리액트 16.8 버전부터 추가)
리액트 훅은 함수형 컴포넌트에서 React state와 클래스형의 LifeCycle 기능을 연동할 수 있게 해주는 함수다.
훅은 class 안에서는 실행되지 않고, class 없이 React를 사용할 수 있게 해준다.
Hook을 활용하면 상태 관련 로직을 추상화해 독립적인 테스트와 재사용이 가능해 레이어 변화 없이 재사용할 수 있다.
또 기존의 라이프사이클 메서드 기반이 아닌 로직 기반으로 나눌 수 있어서 컴포넌트를 함수 단위로 잘게 쪼갤 수 있다.
클래스 컴포넌트를 지양하기 위해 훅을 사용하기도 한다.
React Hook 사용 규칙
1. Hook은 최상위 레벨에서만 호출 가능하다. (반복문, 조건문, 중첩된 함수 내부에서 호출하면 안된다.)
2. Hook은 오직 리액트 함수 컴포넌트 내에서만 호출 가능하다.
→ 컴포넌트가 여러번 렌더링되어도 훅의 호출 순서를 동일하게 유지할 수 있고, 훅이 여러번 호출되어도 훅의 상태를 올바르게 유지할 수 있다. 또 컴포넌트의 모든 상태 관련 로직의 직관성을 높일 수 있다.
Hook 종류 (useState, useEffect...)
1. useState()
const [state, setState] = useState(initialState);상태를 설정할 때 사용하는 훅이다.
클래스 컴포넌트의 생명주기 메소드 constructor()에서 상태를 초기화하는 것과 비슷한 역할을 한다.
인자로 초기 상태(initialState)를 받고, 반환 값으로 현재 상태(state)와 상태를 설정하는 함수(setState)를 반환한다.
2. useEffect()
useEffect(callback, dependency); // 두개의 인자를 넣어서 호출할 수 있음
useEffect(callBack); // 1
useEffect(callBack, []); // 2
useEffect(callBack, [state1, state2]); // 3
useEffect(()=>{ return(() => func()) }); // 4클래스 컴포넌트의 생명주기 메소드 componentDidMount(), componentDidUpdate(), componentWillUnmount(), getDerivedStateFromProps()를 통합한 것과 같다.
side effect를 발생하는 작업을 수행하는 훅이다. Side effect란 다른 컴포넌트에 영향을 줄 수 있고 렌더링 과정에서는 구현할 수 없는 작업을 말한다. (ex. 컴포넌트 안에서 데이터 가져오거나 구독하기, DOM을 직접 조작하기 등)
1번: 렌더링이 될 때마다 실행된다. componentDidMount(), componentDidUpdate, componentWillUnmount(), getDerivedStateFromProps()의 역할을 모두 수행한다.
2번: 컴포넌트가 최초 렌더링 되었을 때만 실행된다. componentDidMount()의 역할 수행한다.
3번: 최초 렌더링 되고, state1이나 state2가 변경되었을 때 실행된다.
componentDidUpdate(), getDerivedStateFromProps()의 역할을 수행한다.
4번: 리턴 함수를 활용해 컴포넌트가 unmount될때 정리한다. componentWillUnmount()의 역할을 수행한다.
외에 여러가지 훅들...
3. useContext()
4. useReducer()
5. useCallback()
6. useMemo()
7. useRef()
8. useImperativeHandle()
9. useLayoutEffect()
10. useDebugValue()
<출처>
https://talking-potato.me/m/52
'TIL & WIL & 회고록 > WIL' 카테고리의 다른 글
| 7월 4주차 WIL - 리액트 State, Props, 리렌더링 발생조건 (0) | 2022.08.02 |
|---|---|
| 7월 3주차 WIL - JavaScript의 ES란? ES5/ES6 문법 차이 (0) | 2022.07.24 |
| 7월 2주차 WIL - about JWT & API , 미니프로젝트 (0) | 2022.07.17 |
