# getDerivedStateFromProps

5개의 포스트
post-thumbnail

React lifecycle

React lifecycle 소개 React에서는 컴포넌트(component)라는 개념을 사용하여 UI를 작성한다. 컴포넌트는 생명주기(lifecycle)를 가지며, 이를 이해하면 React 애플리케이션을 개발하는 데 매우 중요한 지식이 됩니다. 이번 글에서는 React 컴포넌트의 생명주기에 대해 알아보고, 예제와 함께 살펴보겠다. 컴포넌트 생명주기 React 컴포넌트는 생성, 갱신, 제거의 세 가지 생명주기를 갖는다. 각각의 생명주기는 다양한 단계를 거치며, 해당 단계에서 수행될 작업들을 정의할 수 있다. 예를 들어, 컴포넌트가 생성될 때 데이터를 초기화하거나, 갱신될 때 애니메이션을 실행할 수 있다. 1. 생성 컴포넌트가 생성될 때, 다음과 같은 단계를 거친다. constructor: 컴포넌트 생성 시 호출되는 메서드. 초기화 작업을 수행. getDerivedStateFromProps: props로부터 상태(state)를 도출하는 메서드

2023년 3월 20일
·
0개의 댓글
·

Lifecycle methods in React Component and explain each method.

lifecycle methods in React. > React Component의 생명주기 Method는 특정 순간에 자동으로 호출되는 Method입니다. componentDidMount: Component가 처음 Rendering 될 때 DOM에 추가된 후 호출됩니다. shouldComponentUpdate: Rendering 전 호출되어 Rerendering 필요한지 판단 후 호출됩니다. componentDidUpdate: Component가 갱신되어 Rerendering 후 호출됩니다. componentWillUnmount: Component가 DOM에서 제거되기 전 호출됩니다. getDerivedStateFromProps: Rendering 전 호출되어 Component의 상태를 props를 기반으로 업데이트할 수 있습니다. getSnapshotBeforeUpdate: Rendering 전 호출되어 Component가 DOM

2023년 1월 31일
·
0개의 댓글
·
post-thumbnail

[React] Life Cycle

앱 개발을 하면서 렌더링 되기 직전 이나 새로 변경된 후 특정 작업을 수행해야 한다면 life cycle 은 확실히 잡고 넘어가는 것이 좋을 것이다. React 의 component Life Cycle 은 크게 3단계로 분류가 가능하다. Mount → Update → unMount 단계이다. > 1. Mount Mount는 Dom 객체가 생성되고 브라우저 상에 나타나는 것을 말한다. Mount 의 함수 호출 순서이다. constructor component class 의 생성자 함수로 component 를 만들 때 처음으로 호출되

2022년 12월 8일
·
0개의 댓글
·
post-thumbnail

Main Components 2

State and Lifecycle > 각 컴포넌트는 상위에서 하위 컴포넌트로 값을 전달하여 사용할 수 있는데, 이 때 이 전달되는 값을 props 라고 한다. state는 각 컴포넌트가 가지고 있는 개별적인 상태값이다. props는 부모 구성요소에서 설정한 정보를 포함하며 변경할 수 없는 불변성의 특징이 있다. state는 자체적으로 초기화, 변경 및 사용할수 있는 정보를 포함하고, setState를 통해 변경이 가능하다. props는 함수의 매개변수처럼 컴포넌트에 전달되어 불변하고, state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 관리되어 변경이 가능하다

2022년 2월 23일
·
0개의 댓글
·
post-thumbnail

TIL(2020.12.17)

1. LifeCycle API(생명주기) 콤포넌트가 브라우저 상에서 1) 나타날 때 2) 업데이트 될 때 3) 사라질 때 사용됨. 각 생명주기 단계별로 종류가 다양하다. 외우지 말고 필요할 때 매뉴얼에서 찾아서 쓸 수 있으면 됨 각 단계별로 존재하는 함수를 호출해 사용하면 됨. 1-1. Mounting 컴포넌트가 브라우저 상으로 나타날 때 1) constructor 생성자 함수. 만든 컴포넌트가 브라우저 상에서 나타날 때 가장 먼저 실행되는 함수. 주로 컴포넌트가 가지고 있을 state의 초기 설정 또는 컴포넌트가 만들어지는 과정에서 먼저 처리가 돼야 하는 작업이 있을 경우 실행됨. 2) getDerived

2020년 12월 17일
·
0개의 댓글
·