반응형

생명주기 2

React 라이프 사이클 이해하기 (함수형 컴포넌트에서의 생명주기)

TL;DR😄 리액트나 Vue를 이용해서 개발을 하게 될 때 React와 Vue모두 각각의 라이프사이클(생명주기)이 있습니다. '라이프사이클(생명주기)'라는 말을 처음 접하는 분이라면 라이프사이클이라는 말이 막연하게 느껴질 수 있는데 이 부분은 아래 글을 읽으면 자연스럽게 이해할 수 있습니다. 리액트에서 라이프사이클의 개념은 클래스 컴포넌트를 사용할 때 명확히 사용되는 부분인데 React 16.8 이후 리액트 훅(함수형 컴포넌트)의 개념이 등장하면서 생명주기의 개념도 이전처럼 명확하게 구분되어 사용되진 않습니다. 그럼에도 우리는 리액트의 라이프사이클을 알아야 합니다. 아직 React에서는 공식적으로 클래스 컴포넌트와 함수형 컴포넌트 모두 지원을 할 것이라고 발표했고 이전에 작성된 코드들은 대부분 다 클래스..

IT/React 2022.08.16

리액트(React) 스터디일지8: 생명주기(life cycle)

컴포넌트의 수명은 페이지에서 랜더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다. 조금 쉽게 이해를 하기 위해서는 생명주기에 사용되는 접두사를 확인하면 조금 이해하기가 쉽습니다. Will 접두사 : 어떤 작업을 동작하기 전 Did 접두사 : 어떤 작업을 동작한 후 라이프 사이클은 3가지 카테고리(마운트, 업데이트, 언마운트) 구분됩니다. 아래 리액트 생명주기 표를 보시면 조금 더 이해하기 쉬울거 같습니다. 리액트 생명주기 도표 1.마운트 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 마운트라고 합니다. constructor() - 컴포넌트를 새로 만들때만다 호출되는 생성자 getDerivedStateFromProps() - props에 있는 값을 state에 넣을 때 사용 rend..

IT/React 2021.04.08
반응형
//