Cute Spinning Flower Blue
React | 함수형 컴포넌트 생명주기와 useEffect
·
FE/React & Redux
함수형 컴포넌트함수형 컴포넌트는 기존 클래스형 컴포넌트와 달리 React Hooks를 통해 생명주기를 관리함함수형 컴포넌트는 생명주기 메서드 대신 useEffect, useState 등의 훅을 사용해 상태 관리 부수 효과 (side effect)를 처리함 마운트(Mount) 단계컴포넌트가 처음 DOM에 삽입될 때 발생이때 주로 초기 데이터를 설정하거나, 네트워크 요청 수행 useEffect (마운트 시 실행)useEffect(() => { // 마운트될 때 한 번 실행되는 로직 console.log("Component mounted"); // 클린업 함수는 마운트가 해제될 때 실행 return () => { console.log("Component unmounted"); };}, []); ..
React | 클래스형 컴포넌트 생명주기
·
FE/React & Redux
클래스형 컴포넌트 생명주기생성 (Mounting)업데이트 (Update)제거 (Unmounting)각 단계에서는 특정 메서드를 사용할 수 있어 컴포넌트의 상태나 데이터를 제어하고, 특정 작업을 수행할 수 있음 마운팅(Mounting) 단계마운팅 단계는 컴포넌트가 처음 DOM에 삽입될 때 발생함 constructor컴포넌트를 초기화 할 때 호출초기 state를 설정하거나 클래스형 컴포넌트에서는 this 바인딩을 설정할 수 있음 static getDerivedStateFromProps(props, state)컴포넌트가 생성될 때 props로부터 state를 업데이트하고자 할 때 사용return된 객체가 새로운 state가 됨주로 props에 따라 state가 동기화되도록 설정할 때 유용 render컴포넌트를..