SPA란 무엇인가요?
하나의 페이지만으로 구현된 어플리케이션을 말합니다. 각 페이지의 내용을 동적으로 변경하며 하나의 페이지만으로 화면을 구현할 수 있습니다.
- SPA의 단점과 장점에 대해 설명해주세요
- SPA의 단점으로는 페이지가 최초로 로드될때 어플리케이션 전체의 자바스크립트를 로드하여야 하기 때문에 Time to Interact 시간이 오래 걸릴 수 있습니다. 그리고 자바스크립트로 DOM 조작이 빈번하게 일어나 성능 저하가 발생할 수 있습니다. 이러한 문제를 해결하기위해 DOM을 비교하여 바뀐부분이 존재할때 React, Angular, Vue와 같은 라이브러리, 프레임워크들이 등장하였습니다. 마지막으로 SEO에 불리한 구조를 가지고 있습니다.
- 장점으로는 페이지의 이동없이 필요한 부분 혹은 화면 전체를 렌더링하여 효율적이고 사용자에게 더 나은 사용성을 제공할 수 있습니다.
virtual DOM은 무엇인가요?
Virtual DOM은 SPA를 구현할 때 실제 DOM 조작이 많을경우 성능이 저하되는 문제를 해결하기 위해 나왔습니다. React, vue와 같은 라이브러리, 프레임워크는 실제 DOM을 조작하기 이전에 가상 DOM과 비교하여 바뀐 부분을 교체함으로써 최적화된 SPA를 쉽게 사용할 수 있도록해줍니다.
- Shadow DOM과는 다른 건가요?
- 둘은 다릅니다. shadow DOM은 웹 컴포넌트의 범위 지정 변수 및 CSS용으로 설계된 브라우저 기술입니다. Shadow DOM은 글로벌 범위에 포함되지 않아 HTML 모듈화가 가능합니다. 대표적인 예로는 Template 태그가 있습니다.
프롭스 드릴링이란 무엇인가요?
프롭스 드릴링이란 상위 컴포넌트에서 상태 전달을 위해 하위 컴포넌트로 프롭스를 전달하며 이것이 너무 깊어졌을때 발생되는 문제로 해당 상태값이 필요하지 않은 컴포넌트도 전달을 위해 값을 Props로 가지고 있어야 하는 문제점이 있었습니다.
- 이를 해결하기 위한 방법은 무엇이 있을까요?
- redux, recoil과 같은 상태관리 라이브러리 또는 Context를 사용하거나 children 프롭스를 활용하는 방법이 있습니다.
Context API가 무엇인가요?
리액트에서 제공하는 상태관리 기능으로 상태값을 전역적이라고 볼 수 있는 데이터로 활용할 수 있게 해줍니다.
createContext로 관리하고자하는 값을 만들고 useContext 훅으로 값을 전달합니다. context를 변경하기 위해 reducer를 함께 활용합니다.
- 사용해본적이 있으신가요? 있으시다면 단점은 무엇이였나요
- 구글 클론 프로젝트를 진행하며 활용해본 적이 있습니다. 이를 통해 검색 결과, 로딩 상태, 검색 단어를 관리하였습니다. 제가 발견했던 단점으로는 provider로 묶여있는 하위 컴포넌트들은 해당 상태값을 활용하지 않아도 리렌더링이 발생하는 문제점이 있었습니다. 이러한 문제는 redux, recoil에서는 발생하지 않습니다.
key props를 사용하는 이유에 대해서 설명해주실수 있으신가요?
React에서 Key는 주로 배열을 map을 통해 jsx로 반환할때 사용됩니다. 그 이유는 같은 태그를 가진 요소들을 react는 구분하는 능력을 가지고 있지 않고 각각 유니크한 key를 부여함으로써 이를 구분할 수 있게됩니다.
그렇기 때문에 꼭 배열이 아닌 조건에 따라 해당 컴포넌트를 초기화하는 경우에도 key를 통해 같은 컴포넌트가 아니라는 것을 활용하여 상태값을 초기화하는 경우도 있습니다.
React의 이벤트를 설정하는 방법에 대해 설명해주세요.
react에서는 이벤트를 처리하는 두가지 방법이 있습니다.
하나는 Jsx 요소에 OnClick, onChange와 같은 이벤트 핸들러를 인라인으로 작성하는 방법입니다. 함수를 그대로 중괄호안에 작성할 수 있고 파라미터가 있을때에는 콜백형식으로 작성합니다
두번째는 window의 scroll, resize같은 이벤트 핸들러를 등록할때 useEffect 내에 등록합니다. 컴포넌트가 마운트 될때 이벤트 핸들러를 등록하고 언마운트될때 혹은 리렌더링이 발생할때 다시 처리되는 것을 방지하기 위해 클린업 펑션으로 removeaddeventlistenr를 리턴해주어야합니다,.
Ref의 용도에 대해 설명해주세요.
ref는 어떠한 조회, 수정이 가능한 값을 리렌더링 없이 사용하고 싶을때 사용합니다.
ref 객체의 Current 값을 수정하거나 활용할 수 있고 주로 DOM요소에 접근하고 이를 조작할때 많이 사용됩니다.
리액트 관련 라이브러리 중에 제일 좋다고 생각한 것은 무엇인가요?
다양한 라이브러리가 있지만 그 중 react hook form이 가장 기억에 남습니다.
리액트에서 form을 구현할 때 유효성 검사를 쉽게 작성할 수 있고 값 입력마다 리렌더링이 일어나야 하는 문제를 해결해주는 라이브러리입니다. 그 외에도 resetfield 같은 다양한 메서드를 활용할 수 있다는 장점이 있어 form 관련 컴포넌트를 구현할때 시간을 많이 단축할 수 있었기 때문에 기억에 가장 남습니다.
리액트의 렌더링 성능 향상을 위해 어떻게 해야 하나요?
리액트 렌더링 성능 향상을 위해서는 최적화가 필요합니다. 컴포넌트 내 캐싱을 구현해주는 useCallback, useMemo와 같은 hook들을 사용할 수 있습니다. 두 훅 모두 디펜던시의 값에 변동이 있을 경우 다시 만들어지기에 렌더링 성능을 향상시킬 수 있습니다.
- 그럼 그 둘의 차이점에 대해서 알고있나?
- useCallback은 함수 선언 즉 함수 자체를 캐싱합니다. 반면 useMemo는 어떠한 값을 캐싱합니다.
CSS in JS를 사용해 본 적이 있나요? 있다면 소감을 말해주세요.
emotion을 사용해본 경험이 있습니다. 자주 사용하는 색상이나 스타일 요소들을 변수로 설정하고 이를 불러와 활용하기에 깔끔한 스타일 작성이 가능하고 props나 상태값에 따른 스타일링이 가능하다는 장점이 있었습니다. 하지만 컴포넌트 내부에 스타일링을 작성하다보니 지저분해보이는 단점이 있었으나 전체적으로 작업 속도가 빨라져서 장점이 더 많은 방법이였습니다.