carrots-day

생명주기 hooks 기존 React에서는 클래스형 컴포넌트에서만 생명주기 메소드를 제공했다. 하지만 최근 함수형 컴포넌트 사용을 권장하는 추세기 때문에 기존 생명주기 메소드에 상응하는 기능을 필요로 했고, 이에 React는 useState, useEffect hook으로 더 간략하고 이해가 쉽게 해당 기능을 제공한다. 이외 렌더링 관련 많은 hooks가 있지만 useState, useEffect 위주로 포스팅을 풀어본다. 일단 해당 포스트를 읽기 전, Class형 컴포넌트의 이해를 필요로 한다. 참고 > LifeCycle 함수 - Class형 Component [ React.05.LifeCycle 함수 - Class형 Component ] React LifeCycle React는 각 컴포넌트마다 고유의 ..

React LifeCycle React는 각 컴포넌트마다 고유의 생명주기(LifeCycle)을 가진다. class형 컴포넌트의 render 함수 전후로 각 생명주기 함수를 갖는다. import React, { Component } from "react"; class Banner extends Component { render() { return hello carrots; } } export default Banner; Banner라는 컴포넌트가 있다 가정해보자. DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 React에선 각 생명주기에 대한 컨트롤을 위해 메소드를 제공한다. 각 메소드는 Class형 컴포넌트에서만 사용가능하며 다음과 같은 프로세스를 지닌다. LifeCycle Diagr..