React 훅 & 생명주기 & DOM

React 훅 / 생명주기 / DOM

---

1. DOM

정의

• Document Object Model
• HTML 문서의 구조를 객체로 표현

구성

1. Element : <div>, <input>, <p> 등 HTML 마크업
2. Attribute : HTML 마크업 속성 (style, id, class, src, href 등)

---

2. React DOM (Virtual DOM)

정의

• 실제 DOM을 직접 수정하지 않고, 가상 DOM을 생성하여 수정/업데이트

구성

1. Element : 컴포넌트
2. Attribute : props

---

3. 생명주기 (Life Cycle)

정의

• 컴포넌트가 생성부터 사라지는 시점까지의 주기

주기(시점)

1. Mount(출생)
   • main.jsx가 컴포넌트를 렌더링 (render())
   • 상위 컴포넌트가 return할 때 하위 컴포넌트도 생성
   • 1번 실행되는 함수:

     useEffect(() => { }, [])

2. Update(업데이트/인생)
   • 컴포넌트가 재실행 → 리렌더링
   • 업데이트될 때 실행되는 함수:

     useEffect(() => { }, [의존성배열])

   • 의존성 배열: 특정 상태(useState) 변경 시만 실행
3. Unmount(사망)
   • 컴포넌트가 화면에서 사라질 때 자동 실행

---

4. 훅(Hooks)

정의

• React의 컴포넌트(state)와 생명주기 기능에 연결하여 원하는 시점에 함수를 실행

---

5. useState

• 상태(state/값) 관리 훅
• 다른 컴포넌트와 공유 안 됨 (props로 전달 가능)
• 상태 변경 시 컴포넌트 리렌더링
• 사용법:

const [변수명, set변수명] = useState(초기값);

6. useRef

• 정의: 컴포넌트에서 값 또는 DOM 요소에 참조하는 훅
• 특징: 값이 변경되어도 컴포넌트는 리렌더링되지 않음
• 사용법: 선언 후 참조하여 사용 가능

const 변수명 = useRef( 초기값 );

---

7. useEffect

• 정의: 컴포넌트가 렌더링될 때 자동으로 실행되는 훅
• 특징: 의존성 배열을 통해 특정 상태가 변경될 때만 실행
• 사용법: 렌더링 시 필요한 코드 실행, 정리(clean-up) 작업에도 사용

useEffect( ()=>{} , [의존성배열] )