1. React에서 코드 재사용에 있어서 가장 많이 사용되는 방법이 컴포넌트를 통한 재사용이고, 커스텀 훅을 통한 재사용이 있는데 해당 방식의 차이점에 대해 설명해주세요.
- 컴포넌트을 통한 재사용은 UI 요소를 재사용하는 데 중점을 두는 반면, 훅을 통한 재사용은 범용적인 논리나 기능을 공유하는데 중점을 둡니다.
- 같은 로직을 여러 UI에서 사용하고 싶을 때는 커스텀 훅, 같은 UI를 재활용하고 싶을 때는 컴포넌트를 통한 재사용을 사용합니다.
- 예를 들어 데이터 비동기 처리를 하는 useReducer 함수를 커스텀 훅으로 만들어서 여러 데이터 fetching에 사용했고, 버튼 공통 컴포넌트를 만들어서 재사용하여 사용했습니다.
1.1 훅의 규칙에 대해 설명해주세요.
- React 함수의 최상위에서만 훅을 호출해야 합니다.
- 컴포넌트가 렌더링 될 때마다 항상 동일한 순서로 훅이 호출되야하기 때문입니다.
- 오직 React 함수 내에서 훅을 호출해야 합니다.
- 컴포넌트의 모든 상태 관련 로직은 React 함수 내에서 호출해야 합니다.
2. 브라우저 저장소에 대해서 설명해주세요.
- 브라우저 저장소는 사용자 장치에 로컬로 데이터를 저장하는 웹 브라우저의 기능을 나타냅니다.
- 브라우저 저장소의 주요 유형으로 쿠키와 웹 스토리지가 있습니다.
- 쿠키
- 쿠기는 서버에서 브라우저에 전달하는 데이터 조각입니다.
- 쿠키는 최대 4KB까지 저장 가능하고 HTTP 헤더를 통해 조작합니다.
- 웹 스토리지
- 웹 스토리지는 HTML5에 추가된 저장소로 키와 값의 형태로 데이터를 저장할 수 있습니다.
- 웹 스토리지는 키를 통해 데이터를 조회할 수 있고 최대 5MB까지 저장 가능합니다.
- 웹 스토리지 중 local storage는 브라우저 창을 닫아도 데이터가 유지되는 반면에, session storage는 브라우저 창을 닫으면 데이터가 삭제됩니다.
3. 싱글 스레드와 멀티 스레드는 어떤 특징, 어떤 장단점 가지고 있는가?
-
싱글 스레드
-
싱글 스레드는 하나의 프로세스에서 하나의 스레드만 실행하는 기술을 말합니다.
-
싱글 스레드의 장점
- 문맥 교환이나 자원 접근에 대한 동기화를 하지 않아도 되므로 비용이 절감됩니다.
- 스레드를 하나만 사용하므로 CPU, 메모리를 적게 사용합니다.
-
싱글 스레드의 단점
- 연산량이 많은 작업을 하는 경우, 그 작업이 완료되어야 다른 작업을 수행할 수 있습니다.
- 에러 처리를 못하는 경우 멈춥니다.
-
-
멀티 스레드
- 멀티 스레드는 CPU의 최대 활용을 위해 2개 이상의 프로그램을 동시에 실행하는 기술입니다. 메인 스레드 외의 추가적인 스레드를 이용하여 병렬 적으로 작업을 처리합니다.
- 멀티 스레드의 장점
- 프로그램의 일부분이 중단되거나 긴 작업을 수행하더라도 다른 스레드에서 프로그램의 수행이 계속되므로 사용자에 대한 응답성이 증가합니다.
- 프로세스 내 자원들과 메모리를 공유하기 때문에 스레드 간의 통신이 필요한 경우 쉽게 데이터를 주고 받을 수 있습니다.
- 멀티 스레드의 단점
- 문맥 교환이나 동기화 때문에 싱글 스레드보다 스레드 생성 시간이 느립니다.
- 공유한 자원에 동시에 접근하는 경우, 다른 스레드에서 사용 중인 변수나 자료구조에 접근하여 엉뚱한 값을 읽어오거나 수정할 수 있습니다.
