항해 99 28일차 WIL-리액트 훅과 라이프사이클
라이프사이클이란?
->컴포넌트가 웹페이지에 들어갔다가 사라지기 까지의 과정
<life cycle method>
*****컴포넌트는 생성->수정->사라짐*****
*constructor: 생성자 함수
->생성할 무언가를 초기화할 때 사용
->컴포넌트한테 필요한 어떤 값들을 넣어주는 역할
*render: 가상돔에서 진짜돔으로 올라가는 것 (바뀐 부분이 올라갈때)
->렌더가 마무리 되면 마운트 되었다고 한다.(componentDidMount)
*New props(props가 바뀔 때), setState()(state가 바뀔 때), forceUpdate()(강제로 업데이트 했을 경우), 부모 컴포넌트가 없데이트 되었을 때(자식도 리렌더링 된다)
->컴포넌트가 수정될 때(업데이트가 일어날 때)
클래스형 컴포넌트에서 라이프사이클
import React from "react";
// 클래스형 컴포넌트는 이렇게 생겼습니다!
class LifecycleEx extends React.Component {
// 생성자 함수
constructor(props) {//초기값 설정
super(props);
this.state = {
cat_name: '나비',
};
console.log('in constructor!'); //생성자에 들어왔다.
}
changeCatName = () => {
// 다음 강의에서 배울, state 업데이트 하는 방법입니다!
// 지금은 componentDidUpdate()를 보기 위해 쓰는 거니까, 처음보는 거라고 당황하지 말기!
this.setState({cat_name: '바둑이'}); //setState:데이터 바꾸기
console.log('고양이 이름을 바꾼다!');
}
componentDidMount(){ //Mount:화면에 나타나는 것 //가상돔이 실제돔에 올라간 뒤에 componentDidMount함수가 실행된다.
console.log('in componentDidMount!'); //업데이트 될 때에는 실행되지 않는다.처음 렌더링 할 때만 실행
} //보통 ajax요청이나 addEventListener등 이벤트리스너를 붙이거나 하는 작업들을 여기서 많이 실행함. 돔관련 처리도 여기서 주로 한다.
componentDidUpdate(prevProps, prevState){ //리렌더링이 끝난 다음에 실행이 된다.
console.log(prevProps, prevState); // 현재 데이터와 이전 데이터를 비교한다면 여기서 하면 된다.
console.log('in componentDidUpdate!'); //가상돔이 실제돔으로 업데이트 된 후이기 때문에 돔관련 처리도 가능
}
componentWillUnmount(){ //컴포넌트가 라이프사이클에서 사라지기 직전에 호출된다.
console.log('in componentWillUnmount!');
}
// 랜더 함수 안에 리액트 엘리먼트를 넣어줍니다!
render() {
console.log('in render!');
return (
<div>
{/* render 안에서 컴포넌트의 데이터 state를 참조할 수 있습니다. */}
<h1>제 고양이 이름은 {this.state.cat_name}입니다.</h1>
<button onClick={this.changeCatName}>고양이 이름 바꾸기</button>
</div>
);
}
}
export default LifecycleEx;
리액트 훅?
-ReactConf 2018에서 발표된 class없이 state를 사용할 수 있는 새로운 기능
-리액트 훅이 나오기 전에는 주로 클래스 컴포넌트에서 사용이 되어 왔었는데 클래스 컴포넌트에서 있었던 불편감이나 문제점들을 해결하기 위해 개발됨.
Class Component | Functional Component |
더 많은 기능 제공 | 더 적은 기능 제공 |
더 긴 코드 양 | 짧은 코드 양 |
더 복잡한 코드 | 더 심플한 코드 |
더딘 성능 | 더 빠른 성능 |
- Hook은 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능이다.
- useState와 useEffect를 사용하여 특징적으로 state와 lifecycle과 같은 기능을 사용 가능하게 해준다.
- State Hook - useState
- Effect Hook - useEffect
-useState : state와 setState()로 나뉘며 초기에 initialValue를 받고, 해당 초기값은 처음 렌더링시에만 사용한다. Hook은 간단히 말하면 함수 컴포넌트에서 React state와 생명주기 기능(lifecycle features)을 “연동(hook into)“할 수 있게 해주는 함수다. Hook을 통해 class 없이 리액트를 사용할 수 있다.
-useEffect : React class의 componentDidMount나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것이다. 리액트는 기본적으로 렌더링 이후에 effect를 실행한다. 그리고 effect 함수는 컴포넌트 내에 있기 떄문에 props와 state에 접근할 수 있다. 첫번쨰 렌더링과 이후 업데이트 시 마다 effect가 수행된다.
https://ykss.netlify.app/react/hooks/
리액트 Hook(훅)이란?
Hook은 리액트 16.8 버전 이후 추가된 기능이며, Hook이 등장하면서 더 이상 상태를 관리하기 위해 Class를 쓸 필요가 없어졌다. 기존에는 Class형 컴포넌트에서만 상태를 관리 할 수 있었고, 함수형 컴
ykss.netlify.app