Section3 기술면접

임경섭·2023년 5월 9일

재귀

재귀를 활용하기 좋은 상황은 언제인지 예시를 들어 설명해 주세요.

재귀 함수란, 함수에서 자기 자신을 다시 호출해 작업을 수행하는 방식이다.
재귀함수를 이용하는 이유로는 변수의 사용을 줄여주고, 큰 문제를 작은 문제로 분할하여 
쉽게 풀 수 있다는 점이다.
가장 대표적인 예로 팩토리얼이 있다.
for문이나 while문을 사용하는 것보다 재귀 함수로 작성하는 것이 더 자연스럽다.

UI/UX

UI, UX의 개념과 두 개념의 관계에 대해서 설명해 주세요.

Custom Component

Styled Components를 사용해 보면서 느낀 장점을 이야기해 주세요.

우선 컴포넌트마다 css파일을 만드는 것은 아주 귀찮은 일이다. 
그렇다고 하나의 css파일로 작성하기엔 뭐가 어디서 쓰인 지 파악하기가 어려워진다.
하지만 Styled-Components를 사용하면 하나의 JS 파일안에서 CSS를 작성할 수 있다.
이는 코드를 한눈에 보기도 편하고, 원하는 스타일링을 하기도 좋다.

useRef가 필요한 상황을 예시를 들어 설명해 주세요.

JavaScript를 사용할 때는 getElementById, querySelector 같은 DOM Selector 
함수를 사용해서 DOM 을 선택한다.
React에서도 특정 DOM을 선택할 일이 발생하는데, 그 때 ref를 사용한다.
그 중 함수형 컴포넌트에서 useRef라는 Hook함수를 사용한다.
예시로 들자면, 모달 창을 만들 때 바깥 부분을 클릭 시 모달 창이 닫히는 기능을
useRef로 구현할 수 있다.

Redux

상태관리 라이브러리의 필요성에 대해서 설명해 주세요.

간단한 프로젝트의 경우 state & props로 상태값을 관리할 수 있다.
하지만 프로젝트 규모가 커지고 props 전달하는 컴포넌트가 많아지면, 데이터 흐름을 
예측하기 어려울 뿐만 아니라 컴포넌트를 순수 함수로 유지하기 힘들어진다.
이 문제는 상태 관리 라이브러리를 사용하면 해결할 수 있다.

Redux의 주요 개념들과 연결 관계를 설명해 주세요.

Redux는 크게 Action, Dispatch, Store, Reducer로 구성된다.

Action은 state의 변화에 대한 내용을 말한다. type은 필수 구성 요소이고, payload는
필요 시 작성한다.
Dispatch는 Reducer로 Action을 전달해 주는 함수이다.
Reducer는 Dispatch에게서 전달받은 Action 객체의 type 값에 따라서 상태를 변경시키는
함수이다.
Store는 상태가 관리되는 오직 하나뿐인 저장소의 역할을 한다. Redux 앱의 state가 
저장되어 있는 공간이다.

1. 상태가 변경되는 이벤트가 발생하면, 변경될 상태에 관한 Action 객체가 발생한다.
2. Action 객체는 Dispatch 함수의 인자로 전달된다.
3. Dispatch 함수는 받아온 객체를 Reducer 함수로 전달한다.
4. Reducer 함수는 Action 객체의 값을 확인하고, Store의 상태를 변경한다.
5. 상태가 변경되면 리렌더링이 발생한다.