Q & A

Q1. 리액트를 사용하는 이유를 설명해보세요 (2가지 이상)

• 컴포넌트 단위로 이루어져 있어 재사용이 용이하고 유지보수에 효율적이다.
• Virtual DOM을 활용하여 성능을 최적화한다.
• 메타에서 꾸준히 유지보수 중이고 사용자가 많아 참고할 커뮤니티가 많다.

Q2. (Q1)을 통해 얻을 수 있는 장점은 무엇일까요?

• 사용자에게 interactive한 UI를 제공할 수 있다.

Q3. 리액트가 가상 돔을 사용하는 이유는 무엇일까요?

• state 변화를 감지하여 해당 state를 가지고 있는 컴포넌트만 리렌더링 시키기 위해

Q4. 리액트가 가상 돔과 돔 트리를 비교하여 바뀐 부분이 있다면 화면을 다시 그리는 행위를 무엇이라 할까요?

• 리렌더링

Q5. (Q3)의 행위를 통해 얻을 수 있는 이점은 무엇일까요?

• 페이지 전체를 리렌더링하지 않아도 되어 성능이 좋다.

Q6. (Q3)은 리액트에서 어느 순간에 실현될까요?

• state가 변화될 때

Q7. 훅 함수는 왜 만들게 되었을까요? 아래의 훅 함수는 각 언제 선언되어야 할까요?

• 훅 함수는 함수형 컴포넌트에서 state와 라이프사이클 메서드를 사용할 수 있게 하기 위해 리액트 16.8부터 도입되었다.
  기존 클래스형 컴포넌트는 state와 라이프사이클 메서드를 사용할 수 있으나 this문법 사용 등 복잡하였는데, 훅 함수가 도입되고 나서 함수형 컴포넌트에서도 state와 라이프사이클 메서드 사용이 가능해졌다.

1. useState : state의 생성 및 갱신. 컴포넌트가 리렌더링 되어야 할 때
2. useRef : rerender와 상관없이 유지될 값이 필요할 때
3. useEffect : state가 변하고 나서 생기는 사이드 이펙트를 만들 때
4. useCallback : 특정 함수를 캐싱, 화면이 다시 리렌더링 되어도 재선언하지 않고 재사용할 때
5. useMemo : 연산된 결과를 캐싱하여 화면이 다시 리렌더링 되어도 재선언하지 않고 재사용할 때

Q8. 커스텀 훅을 제작하면서 얻을 수 있는 이점은 무엇이고 어느 때 만들어야 할까요?

• hook 함수를 사용한 작업이 반복될 때 이를 모듈화 시켜 커스텀 훅으로 만들면 재사용성이 높아지고 유지보수가 쉬워진다.

Q9. 리액트로 프로젝트를 만들려고할 때 고려해야하는 사항들을 아는대로 작성해보세요 (3가지 이상)

• 폴더 구조 설계 : 요구사항과 프로젝트 규모를 고려하여 설계해야 함
• 컴포넌트 설계 : 독립적인 기능을 하도록 컴포넌트를 분리하여 유지보수를 쉽게 하고 가독성을 높여야 함
• 상태 관리 : 상태 관리가 곧 리액트 프로젝트의 성능과 연결되므로 매우 중요함
• 성능 최적화 : 상태를 최소화하여 리렌더링을 줄이고 필요시에는 메모이제이션을 이용하여 성능을 높여야 함

Q10. 만약 위의 질문에 모두 답을 했다면, 현재 부족한 것은 리액트가 아닌 자바스크립트 일 수 있습니다. 이전 풀어보았던 자바스크립트 API 문제 1~4와 board 문제를 현재 풀이할 수 있는지 확인해보세요

react로 풀이를 한다고 가정했을 때와 (직접 바꿔보지는 말 것, 예제 문제와 유사) vanilla js(java script)로 풀이한다고 하였때 와의 차이점은 무엇일까요?

• js 사용 시에는 값에 변화가 있을 때 전체를 다시 렌더링 시키고 해당 요소에 다시 이벤트 핸들러를 등록해야함
• react 사용 시에는 값에 변화가 있을 때 변화가 생긴 부분만 리렌더링 시키고 이벤트 핸들러를 등록시킬 필요가 없음

Q11. 리액트에서 컴포넌트를 나누는 기준은 어떻게 되어야할까요? 또한, 이러한 관점은 개발자마다 다를 수 있는데 왜 그럴까요?

• 컴포넌트는 독립적인 기능 단위로 나눠야 한다. 하지만 때로는 가독성 또는 효율적인 상태 관리를 위해 다르게 나눌 때도 있으므로 이러한 관점은 개발자마다 다를 수 있다.