1. DOM vs React DOM
DOM (Document Object Model)
- 정의: HTML 문서의 구조를 객체로 표현한 모델
- 구성
- Element: HTML 태그 (div, input, p 등)
- Attribute: 태그 속성 (class, id, style, src, href 등)
React DOM (Virtual DOM)
- 정의: 실제 DOM을 직접 다루지 않고, 가상 DOM(Virtual DOM) 을 만들어 비교 후 필요한 부분만 업데이트
- 장점
- 불필요한 전체 DOM 조작 최소화 → 성능 최적화
- 구성
- Element: 컴포넌트
- Attribute: props
2. 컴포넌트 생명주기 (Life Cycle)
컴포넌트가 출생 → 인생 → 사망하는 과정을 의미
1) Mount (마운트 = 출생)
- 컴포넌트가 처음 화면에 나타날 때 실행
- 예: main.jsx에서 .render() 호출 시
- 하위 컴포넌트도 함께 생성됨
- 관련 Hook
useEffect(() => {
console.log("출생 시 한 번 실행됨");
}, []);
2) Update (업데이트 = 인생)
- 상태(state)나 props가 변경될 때마다 실행 (리렌더링 발생)
- 즉, 컴포넌트 함수가 다시 호출됨
관련 Hook
useEffect(() => {
console.log("업데이트 시마다 실행");
}, [의존성변수]);
- 의존성 배열
- 특정 값만 감시하고 싶을 때 사용
- [] → 출생 시 1회 실행
- [state] → 해당 state 변경될 때만 실행
3) Unmount (언마운트 = 사망)
- 컴포넌트가 화면에서 사라질 때 실행
- 이벤트 리스너/타이머 제거 등 정리(clean-up)에 사용
- 관련 Hook
useEffect(() => {
return () => {
console.log("사망 시 실행 (정리)");
};
}, []);
3. 훅 (Hook)
리액트에서 함수형 컴포넌트가 상태(state)와 생명주기 기능을 사용할 수 있도록 제공하는 기능
“갈고리(Hook)를 건다”는 의미 → 특정 시점에 원하는 함수를 실행 가능
useState
- 상태 관리를 위한 Hook
- 값이 변경되면 해당 컴포넌트가 자동 리렌더링
- 다른 컴포넌트와 직접 공유 불가 → props로 전달 가능
- 문법
const [count, setCount] = useState(0);
useRef
- 특정 값 또는 DOM 요소를 참조하기 위한 Hook
- 값 변경 시 리렌더링이 발생하지 않음
- 주로 DOM 직접 접근할 때 사용 (focus(), scrollTo())
- 문법
const inputRef = useRef(null);
useEffect
-
컴포넌트가 렌더링될 때 실행되는 Hook
-
기본형
useEffect(() => {
// 실행 코드
}, [의존성]);
- 동작 패턴
- []: 출생 시 1회 실행
- [state]: 해당 state 변경될 때 실행
- Clean-up 함수 return: 언마운트 시 실행
