1. State Lifting (상태 끌어올리기)

개념

State Lifting은
여러 컴포넌트가 동일한 데이터를 필요로 할 때,
그 데이터를 개별 컴포넌트가 아닌 공통 부모 컴포넌트에서 관리하도록 구조를 변경하는 설계 방식이다.

등장 배경 (왜 필요한가)

React는 단방향 데이터 흐름 구조를 가진다.

• 데이터는 항상 부모 → 자식 방향으로 전달된다.
  
• 형제 컴포넌트끼리는 props나 state를 직접 공유할 수 없다.
  
• 하나의 상태를 여러 컴포넌트가 따로 관리하면
  데이터 불일치 문제가 발생한다.
  

예를 들어:

• A 컴포넌트에서 수정을 했는데
  
• B 컴포넌트에는 반영되지 않는 상황
  

이런 문제를 해결하는 방법이
바로 State Lifting이다.

핵심 원리

• 하나의 state는 한 곳에만 관리한다.
• 여러 컴포넌트는 그 상태를 props로 내려받아 사용한다.

한 줄 요약

State Lifting은 상태를 부모로 올려 props로 분배하는 구조 설계 패턴이다.

2. 라이프사이클 (Lifecycle)

개념

라이프사이클은
React 컴포넌트가 생성되고, 변경되고, 제거되는 전체 흐름을 의미한다.

단계

• Mount: 컴포넌트가 처음 화면에 나타나는 시점
  
• Update: state 또는 props가 변경되어 리렌더링되는 시점
  
• Unmount: 컴포넌트가 화면에서 제거되는 시점
  

핵심 의미

컴포넌트는 항상
"태어나고 → 바뀌고 → 사라지는" 과정을 거친다.
이 흐름 전체를 라이프사이클이라고 부른다.

한 줄 요약

컴포넌트의 생성부터 제거까지의 생명 흐름

3. useEffect

개념

useEffect는
컴포넌트의 라이프사이클에 맞춰
사이드 이펙트를 실행하는 훅이다.

사이드 이펙트란

렌더링과 직접적인 관련이 없는 모든 작업:

• API 호출
• 타이머 설정
  
• 이벤트 등록
  
• 콘솔 로그
  
• DOM 조작
  
• 저장소 접근 등

코드

useEffect로 리액트의 라이프사이클을 알아보자

mount 마운트

  //  1. 마운트 : 첫 렌더링, 탄생
  useEffect(()=>{
    console.log("mount")
  },[])

새로고침을 눌렀을 때 즉, 처음 컴포넌트가 첫 렌더링이 됐을 때만 로그를 띄움

update 업데이트

  const isMount = useRef(false)
  //  2. 업데이트 : 리렌더링, 변화
  useEffect(()=>{
    if(!isMount.current){
      isMount.current = true;
      return;
    }
    console.log("update")
  })

useRef를 이용하여 처음 마운트됐을 때 로그를 부르지 않고, 이후 리렌더링 될떄마다 로그 띄움
의존성 배열이 없기 때문에 state,props, 부모 리렌더링 등 모든 리렌더링 상황마다 실행

unmount 언마운트

import { useEffect } from "react"

const Even =()=>{
    useEffect(()=>{
        //useEffect에서 콜백함수가 반환하는 함수: 클린업 또는 정리 함수
        return () => {
            console.log("unmount")
        };
    },[])
    return <div>짝수입니다</div>
}
export default Even

짝수가 아닐 경우 컴포넌트가 조건부 렌더링에서 제거되며 이때 cleanup 함수가 실행되며 로그를 띄움.

정리해서 말하면

• 라이프사이클 → 언제 실행할지 (시점)
  
• 사이드 이펙트 → 무엇을 실행할지 (작업)
  
• useEffect → 둘을 연결하는 장치
  

한 줄 요약

useEffect는 라이프사이클 기준으로 부수 작업을 관리하는 훅