TIL 10/13 기술면접질문3

• 리액트에서 JSX 문법이 어떻게 사용되나요?⭐️

 

JSX의 기본 구조: JSX는 JavaScript 내에서 HTML과 유사한 문법을 사용합니다. JSX 엘리먼트는 각각 하나의 컴포넌트를 나타냅니다.

JSX에서 자바스크립트 표현식 사용: JSX 내에서 자바스크립트 표현식을 사용하기 위해 중괄호 { }를 사용합니다. 이를 통해 동적 데이터를 JSX에 삽입하거나 JavaScript 함수 및 연산을 실행할 수 있습니다.

조건부 렌더링: JSX 내에서 조건부 렌더링은 삼항 연산자나 조건문(if-else)을 사용하여 구현할 수 있습니다.

반환하는 엘리먼트 제한: JSX 함수나 컴포넌트는 하나의 최상위 엘리먼트로 감싸져야 합니다. 두 개 이상의 엘리먼트를 반환할 때는 반드시 부모 엘리먼트로 감싸야 합니다.

---

• 왜 state를 직접 바꾸지 않고 useState를 사용해야 하나요?

 

불변성이 유지되기 위해 useState를 사용해야 합니다. react는 상태의 변경 여부를 상태의 참조값을 통해 판단하게 되는데 직접 상태를 변경하면 이러한 참조값이 변하지 않으므로 react는 변경을 감지하지 못하고 렌더링을 다시 수행하지 않기 때문입니다. setState를 사용하면 새로운 상태가 생성되어 새로운 참조값을 가지므로 react가 변경을 감지하고 렌더링을 실행합니다. 

---

• useMemo와 useCallback에 대해 설명해주세요.⭐️

 

렌더링 중에 반복 계산을 방지하거나 계산 비용이 높은 값을 계산할 때 useMemo를 이용하여 동일한 값을 반환하는 함수의 값을 메모이제이션합니다. useCallback은 인자로 들어오는 함수 자체를 메모이제이션합니다. 두 hook 모두 두 번째 인자로 의존성 배열을 제공하면, 값이 변경 될 때만 메모이제이션 되고 빈 배열일 경우 한번만 호출이 됩니다. useMemo와 useCallback을 남발하게 되면 별도의 메모리 확보를 너무 많이 하게 되기 때문에 오히려 성능이 악화될 수 있어서 필요할 때만 사용해야 합니다.