항해 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(훅)이란?