질문: React는 무엇이며, 이를 사용하는 이유는 무엇인가요?
답변: React는 Facebook에서 만든 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. React를 사용하면 UI를 개별적이고 재사용 가능한 컴포넌트로 분할하여 구축할 수 있습니다. 이렇게 하면 코드의 유지 보수가 쉬워지고, 테스트를 용이하게 합니다. 또한, Virtual DOM을 통해 빠른 렌더링을 가능하게 합니다.
질문: React에서 컴포넌트란 무엇인가요?
답변: 컴포넌트는 React의 기본 구성 단위로, UI의 특정 부분을 나타냅니다. 컴포넌트는 독립적이며 재사용 가능합니다. 컴포넌트를 이용하여 복잡한 UI도 쉽게 구성할 수 있습니다.
질문: React의 Virtual DOM이란 무엇인가요?
답변: Virtual DOM은 실제 DOM의 가벼운 복사본으로서, React의 핵심 개념 중 하나입니다. 데이터가 변경되면 React는 먼저 Virtual DOM에 변경사항을 반영하고, 이후 실제 DOM에 필요한 변경사항만 업데이트합니다. 이 과정을 통해 불필요한 렌더링을 최소화하고 성능을 향상시킵니다.
질문: React의 Props와 State에 대해 설명해주세요.
답변: Props와 State는 React 컴포넌트에서 사용되는 데이터를 관리하는 방법입니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 데 사용됩니다. Props는 읽기 전용이므로, 컴포넌트 내에서 변경할 수 없습니다. 반면에 State는 컴포넌트의 내부 상태를 관리하며, 사용자의 상호작용이나 시간 경과 등으로 변경될 수 있습니다. State의 변경은 해당 컴포넌트의 재렌더링을 유발합니다.
질문: React Hooks에 대해 설명해주세요.
답변: React Hooks는 React 16.8 버전부터 도입된 기능으로, 함수형 컴포넌트에서 State와 생명주기 메소드를 사용할 수 있게 해줍니다. 이전에는 이런 기능들을 사용하려면 클래스형 컴포넌트를 사용해야 했지만, Hooks의 도입으로 함수형 컴포넌트에서도 사용할 수 있게 되었습니다. 대표적인 Hooks에는 useState, useEffect 등이 있습니다.
질문: JSX란 무엇인가요?
답변: SX는 JavaScript XML의 약자로, React에서 사용하는 강력한 JavaScript 구문 확장입니다. 이는 HTML과 매우 유사한 구문을 가지고 있어, 웹 개발자들에게 친숙하게 느껴집니다. JSX를 통해 JavaScript 내에서 HTML 태그를 선언할 수 있습니다.
실행시에는JavaScript로 변환되어 실행되며, 사용자 인터페이스를 구성하는 요소와 컴포넌트를 더 쉽게 이해하고 작성할 수 있게 해줍니다.
React Hooks는 React 16.8 버전에서 도입되었으며, 함수형 컴포넌트에서 상태와 생명주기 기능을 활용할 수 있게 해주는 기능입니다. 여기서 useState, useEffect, useCallback, **useMemo**는 가장 많이 사용되는 훅입니다.
useState: 컴포넌트 내에서 상태를 추가하고 관리할 수 있게 해주는 훅입니다. **useState**는 초기 상태 값을 인자로 받고, 상태 변수와 해당 상태를 갱신하는 함수를 배열 형태로 반환합니다. 상태를 갱신하는 함수를 호출할 때 새로운 상태 값을 인자로 넘기면 상태가 갱신되고 컴포넌트가 재렌더링됩니다.
ex. const [count, setCount] = useState(0);
useEffect: 함수형 컴포넌트에서 생명주기 메소드를 대체할 수 있게 해주는 훅입니다. **useEffect**는 함수를 인자로 받으며, 이 함수는 컴포넌트가 렌더링된 후에 실행됩니다. 또한, 선택적으로 배열을 두 번째 인자로 받을 수 있으며, 배열의 값이 변경될 때마다 효과 함수가 실행됩니다. 배열이 비어 있을 경우 효과 함수는 컴포넌트가 처음 렌더링될 때와 언마운트될 때만 실행됩니다.
ex. useEffect(() => {
document.title = Clicked ${count} times;
}, [count]); // count가 변경될 때마다 실행됩니다.
useCallback: 메모이즈된 콜백 함수를 반환하는 훅입니다. **useCallback**은 첫 번째 인자로 함수를, 두 번째 인자로 배열을 받습니다. **useCallback**은 첫 번째 인자로 받은 함수를 메모리에 저장하고, 두 번째 인자로 받은 배열의 값이 변경될 때만 새로운 함수를 반환합니다. 그 외에는 저장된 함수를 반환합니다. 이를 통해 불필요한 함수 생성을 피하고 성능을 향상시킬 수 있습니다.
ex. const memoizedCallback = useCallback(() => { doSomething(a, b); }, [a, b]); // a나 b가 변경될 때만 새로운 함수를 반환합니다.
useMemo: 메모이즈된 값을 반환하는 훅입니다. **useMemo**는 첫 번째 인자로 함수를, 두 번째 인자로 배열을 받습니다. **useMemo**는 첫 번째 인자로 받은 함수의 반환 값을 메모리에 저장하고, 두 번째 인자로 받은 배열의 값이 변경될 때만 새로운 값을 계산하여 반환합니다. 그 외에는 저장된 값을 반환합니다. 이를 통해 불필요한 값 계산을 피하고 성능을 향상시킬 수 있습니다.
ex. const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);