[리액트 인터뷰 가이드] 리액트의 기본 개념과 이해(part2)

가상 DOM

• 가상 DOM이란?
  :: 웹페이지 UI는 DOM이라는 Tree로 나타낸다. 리액트 컴포넌트에 의해 생성된 실제 DOM의 메모리상 경량화된 가상 표현이다. 리액트는 가상 DOM을 생성해서 변경된 데이터를 감지해서 화면에 리렌더링을 일으킨다. 이 과정을 재조정(reconciliation)이라고 한다.

• 가상 DOM은 어떻게 작동하는가?
  :: 애플리 케이션이 처음 렌더링시 가상DOM을 생성한다 -> 데이터가 변경이 되면 새로운 가상DOM이 생성된 후에 이전 가상DOM과 비교한다.(재조정) -> 변경사항을 실제 DOM에 적용한다. -> repaint과정이 일어난다.

리액트 애플리케이션에서의 데이터 흐름과 통신

• 리액트에서 단방향 데이터 흐름을 설명할 수 있는가?
  :: 리액트는 props를 통해 부모 컴포넌트에서 자식 컴포넌트에게 데이터를 전달하는 데이터 단방향을 따른다. 그 반대 방향은 업데이트 할 수 없다.

• 단방향 데이터의 이점은 무엇인가?
  :: 쉬운 디버깅과 오류 발생이 감소된다.

리액트에서 DOM 요소 접근

• refs란 무엇인가? 어떻게 refs를 생성하는가?
  :: refs란 리액트 render로 생성된 DOM 노드 혹은 리액트 요소에 접근하는데 사용된다.참조는 refs.current로 접근이 가능하다.

const SignUpForm = () => {
	
	const inputRef = useRef(null);

	useEffect(()=> {
		inputRef.current.focus();
	},[])
  
  	return(
    	<>
			<input type="email" ref={inputRef} />
			<button>이메일 확인 </button>
      	</>
    )
}

• refs의 주요 목적은 무엇인가?
  :: 리액트의 선언적 방식으로 구현하기 어려운 즉, DOM의 직접 접근해야할때 같은 경우를 위해 ref가 필요하다. 예시로는 스크롤 위치 기억, 포커스 등 이 있다.

• state와 refs의 차이점은?
  :: 변경사항이 있더라도 refs는 리렌더링 되지 않으며 state는 리렌더링이 된다. 화면에 리렌더링이 되지 않은 채 리렌더링간의 정보를 저장하고 싶다면 refs를 사용해야한다.

컨텍스트 API를 사용한 전역 상태 관리

• 프롭드롤링이란?
  :: 부모 컴포는트에서 자식 컴포넌트에게 전달되는 데이터를 props라고 하고 그 과정을 props drilling이라고 한다.

• 컨텍스트에 대해 설명할 수 있는가?
  :: 컨텍스트 데이터는 중앙에 위치해 컴포넌트 트리에 각 직접 수동으로 전달하지 않고도 사용할 수 있다.

1. context를 생성한다.

import React from 'react';

// 테마 상태를 위한 타입 정의
export type Theme = 'light' | 'dark';

// Context가 가질 값과 업데이트 함수를 정의
export interface ThemeContextValue {
  theme: Theme;
  toggleTheme: () => void;
}

// 기본값 정의 (실제 Provider가 없을 경우 사용될 값)
export const ThemeContext = React.createContext<ThemeContextValue>({
  theme: 'light',
  toggleTheme: () => console.warn('Provider not mounted')
});

2. 컨텍스트를 제공한다.

import { Theme, ThemeContext, ThemeContextValue } from './ThemeContext';

interface ThemeProviderProps {
  children: ReactNode;
}

export const ThemeProvider = ({ children }: ThemeProviderProps) => {
  const [theme, setTheme] = useState<Theme>('light');

  // 테마를 토글하는 함수 정의
  const toggleTheme = useCallback(() => {
    setTheme(currentTheme => (currentTheme === 'light' ? 'dark' : 'light'));
  }, []);

  // Context Value 객체를 useMemo로 감싸 불필요한 리렌더링 방지
  const contextValue: ThemeContextValue = useMemo(() => ({
    theme,
    toggleTheme,
  }), [theme, toggleTheme]);

  return (
    // Context.Provider를 사용하여 모든 하위 컴포넌트에 값을 제공
    <ThemeContext.Provider value={contextValue}>
      {children}
    </ThemeContext.Provider>
  );
};

3. 컨텍스트를 사용한다.

import React, { useContext } from 'react';
import { ThemeContext } from './ThemeContext';

const ThemeToggler = () => {
  // Context의 값 (toggleTheme 함수)을 가져옵니다.
  const { theme, toggleTheme } = useContext(ThemeContext);

  return (
    <button onClick={toggleTheme}>
      테마 전환 ({theme === 'light' ? 'Dark Mode' : 'Light Mode'})
    </button>
  );
};

export default ThemeToggler;

• 컨텍스트의 목적은 ?
  :: props drilling 없이 전역 데이터에 접근하지 위해