항해 35일차
벌써 리액트 심화 주차에 돌입했다. 이제 이번주에 리액트 리덕스로 json서버를 이용해서 CRUD를 구현해보고 다음주부터는 백엔드 분들과 팀이 합쳐저서 실전을 대비하게 된다.
벌써 설레고 그때를 위해서 열심히 해야겠다는 생각이 든다.
이번주차 과제는
라이프사이클(클래스형 vs 함수형) 와 react hooks 대해서다
LifeCycle
라이프 사이클은 컴포넌트가 렌더링을 준비하는 순간부터, 페이지에서 사라질 때까지를 나타낸다. 아래 표는 리액트 컴포넌트의 라이프 사이클을 보여준다.
라이프사이클은 크게 세 단계로 나눠진다. 생성될 때(Mount), 업데이트할 때(Update), 제거할 때(Unmount)로 나눠진다.
클래스형 vs 함수형 (react hooks)
1. constructor
component의 생성자 메소드이다. 컴포넌트가 생성되면 제일 먼저 실행된다. 이 메서드에서는 초기 state를 정할 수 있다.
class Example extends React.Component {
constructor(props) {
super(props);
this.state = { number: 0 };
}함수형에서는 useState 훅을 이용하여 state를 설정할 수 있다.
const Example = () => {
const [count,setCount] = useState(0);
}2. render
컴포넌트를 렌더링하는 메서드이다.
// Class
class Example extends React.Component {
render() {
return <div>Component</div>
}
}함수형 컴포넌트에서는 render를 쓰지 않고 컴포넌트를 렌더링할 수 있다.
const example = () => {
return <div>Component</div>
}3. componentDidMount
컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메서드이다. 이 메서드가 호출될 때는 컴포넌트가 화면에 나타나있는 상태이다.
여기에서 ajax 요청, 이벤트 등록, 함수 호출, 외부 API요청 등 작업을 처리한다.
// Class
class Example extends React.Component {
componentDidMount() {
...
}
}함수형 컴포넌트에서는 useEffect 훅을 이용하여 componentDidMount와 componentDidUpdate, componentDidUnmount까지 나타낼 수 있다.
const Example = () => {
useEffect(() => {
...
}, [] ); // dependency array[]
}Dependency Array
useEffect메서드의 두번째 인자이다.
dependency array를 비우면 컴포넌트가 처음 나타날 때에만 useEffect 에 등록한 함수가 호출된다.
dependency array에 특정 값을 넣게 된다면, 컴포넌트가 처음 마운트 될 때에도 호출이 되고, 지정한 값이 바뀔 때에도 호출이 된다. dependency array안에 특정 값이 있다면 언마운트시에도 호출이되고, 값이 바뀌기 직전에도 호출이 된다.
4. componentDidUpdate
리렌더링을 완료한 후 변화가 모두 반영된 뒤 실행한다. 업데이트가 끝난 직후이므로, DOM관련 처리를 할 수 있다. 매개변수로 prevProps와 prevState있는데 이는 각각 업데이트 되기 전 props, state이다.
// Class
class Example extends React.Component {
componentDidUpdate(prevProps, prevState) {
...
}
}
5. componentDidUnmount
컴포넌트를 DOM에서 제거할 때 실행한다. componentDidMount에서 등록한 이벤트가 있다면 여기서 제거 작업을 한다. (e.g. removeEventListener) 만약에 setTimeout 을 걸었다면 clearTimeout 을 통하여 제거를 한다. 추가적으로, 외부 라이브러리를 사용한게 있고 해당 라이브러리에 dispose 기능이 있다면 여기서 호출한다.
// Class
class Example extends React.Component {
coomponentWillUnmount() {
...
}
}함수형 컴포넌트에서는 useEffect()메서드의 return 부분에 Unmount할 때 정리할 메서드 cleanUp메서드를 적어주면 된다.
const Example = () => {
useEffect(() => {
return () => {
...
}
}, []);
}