Group Interview) React

Q1. JSX

JSX란 무엇인가요?

가독성이 좋도록 기존 자바스크립트 문법을 이용한 유사 자바스크립트의 확장된 버전의 언어이다.

---

Q2. React

React란 무엇인가요?

UI를 만들기 위한 선언적인 자바스크립트 라이브러리이다. 컴포넌트라는 코드의 레고 블록을 이용해 복잡한 UI를 구성한다.

---

Q3. React 사용 이유

React를 사용하는 이유는 무엇인가요?

DOM을 직접 조작하지 않고 가상돔을 이용함으로써 코드가 간결해지고, 유지보수가 용이해진다. 재사용 가능한 컴포넌트를 사용함으로써 재사용성이 높아진다.

---

Q4. CRA

CRA란 무엇인가요?

Create-React-App 줄임말으로 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구이다.

1. node.modules
   • CRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더
2. package.json
   • CRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(추가 패키지, 버전)이 기록되는 파일
3. gitignore
   • github에 올리고 싶지 않은 폴더와 파일을 생성한다.

---

Q5. 컴포넌트

컴포넌트란 무엇인가요?

프로그래밍에서 독립된 모듈은 다 컴포넌트라 하고, 특히 리액트에서는 재사용 가능한 UI를 말한다.

---

Q6. Sass

React Sass란 무엇인가요? 사용하는 이유는 무엇인가요?

css의 전 처리기 중 하나로 코드 중복을 줄일 수 있다. 또한 일반적인 프로그래밍 기법인 변수화/함수화(+네스팅) 같은 기능으로 유지보수성이 css보다 뛰어나다.

• 전 처리기 : css가 복잡화되어 유지보수가 어려울 때 생기는 문제점들을 해결해주는 도구
  • 복잡화 경우 : css규모가 커짐 / 스타일시트 다중 적용

---

Q7. Router

React Router란 무엇인가요? 사용하는 이유는 무엇인가요?

라우터는 특별한 라이브러리이자 컴포넌트이다. 다른 컴포넌트로 이동 가능하도록 해준다.

---

Q8. 라이브러리 VS 프레임워크

라이브러리와 프레임워크의 차이점은 무엇인가요?

• 공통점 : 다른 개발자가 만들어놓은 개발을 도와주는 코드들이라는 점
• 차이점
  • 프레임워크 : 뼈대라서 그 안의 문법을 꼭 지켜야 함
  • 라이브러리 : 작은 라이브러리라서 다양한 라이브러리들 혼용이 가능함

---

Q9. mock data 사용 이유

mock data를 사용하는 이유는 무엇인가요?

프론트엔드 개발을 진행하려는데 필요한 백엔드 API가 완성이 안 되었을 경우에 백엔드 API가 완성 될 때까지 기다리는 게 아니라 mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고, 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인하기 위해 사용한다.

---

Q10. SPA

SPA란 무엇인가요?

SPA(Single Page Application)는 페이지가 하나인 어플리케이션을 말하며 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요할 데이터만 가져오는 형태를 가진다.

---

Q11. useEffect

useEffect는 무엇인가요?

리액트의 컴포넌트가 렌더링 이후에 어떤 일을 수행해야 하는지 설정해주는 함수로, 렌더링, 변수의 값, 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트 해준다. useEffect는 콜백 함수를 부르게 되며 변경 사항에 따라 하나 또는 여러 개의 함수들을 동작시킬 수 있다.

---

Q12. sideEffect

함수형 컴포넌트에서 side effect를 발생해야하는 경우는 언제인가요?

데이터 가져오기, 구독(subscription) 설정하기, 수동으로 React 컴포넌트의 DOM을 수정하는 것까지 이 모든 것이 sideEffect이다. React가 DOM을 업데이트한 뒤 추가로 코드를 실행해야 하는 경우가 있다. 네트워크 리퀘스트, DOM 수동 조작, 로깅 등은 정리(clean-up)가 필요 없는 경우들이다.

---

Q13. state VS props

state와 props의 차이는 무엇인가요?

• props는 수정될 수 없다. 다른 값을 계산하거나, 화면에 표현하거나, 이럴 때에 사용된다.
• state는 컴포넌트의 생명주기 내에 있는 한 변화할 수 있다.

---

Q14. Hook

state를 선언하기 위해서 어떤 훅을 사용하나요?

함수형 컴포넌트 안에 state를 추가하고 싶을 때 훅을 사용하는데 useState는 가장 기본적인 훅으로서 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다. 하나의 useState 함수는 하나의 상태 값만 관리할 수 있기 때문에 만약 컴포넌트에서 관리해야 할 상태가 여러개라면 useState를 여러번 사용하면 된다.

---

Q15. React 특징

React의 특징(으로 시작해서 연계 질문 계속 가능)

1. 컴포넌트 기반의 라이브러리
   헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있어 코드의 재사용성과 유지보수성을 증가시켜준다.

2. Virtual DOM
   React에서는 인터랙션이 발생하게 되면 바로 브라우저의 DOM에 접근하여 변화를 반영하는 것이 아니라 Virtual DOM에 한 번 렌더링하고, 이를 기존의 DOM과 비교하여 변화가 필요한 곳만 렌더링한다. 이런 작업을 통해 실제 브라우저에서 DOM의 조작을 최소화해줄 수 있고 이것은 곧 성능 문제로 직결되므로 중요할 수밖에 없다.

3. 단방향 데이터 흐름
   리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기 때문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.

장점

• 배우기가 간단하고, 애플리케이션을 만들 때 복잡함이 적다.
• Controller, directive, template, model 처럼 분리를 하지 않고 Component 단 하나로 관리한다.
• 뛰어난 Garbage Collection, 메모리 관리, 성능을 가지고 있다.
• 서버 사이드 렌더링과 클라이언트 렌더링을 둘 다 지원한다.
• 간편한 UI 수정과 재사용이 용이하다.
• 다른 프레임워크나 라이브러리와 혼용하여 사용할 수 있다. 즉, 개발이 완료된 서비스에도 적응이 가능하다.

단점

• 보여지는 부분에만 관여하기때문에 데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않는다.
• view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우에는 사용이 힘들다.
• IE8 이하 버전들을 지원하지 않는다.
• jQuery, Vue, Angular 등과 비교했을 때 페이지 로딩 속도가 느리다.

---

Q16. map 함수

map 함수가 무엇인지 설명해주세요.

map 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환하는 메소드이다.

---

Q17. React 이벤트 핸들링

버튼을 클릭했을 때 alert 창을 띄우고 싶습니다. 리액트에서 어떻게 구현할까요?

컴포넌트 내에서 alert 창을 띄우는 메소드를 정의한다. 그리고 버튼 태그에 onClick 이벤트를 추가하고 그 안에 메소드 이름을 추가해주면 된다.

---

Q18. Virtual DOM

Virtual DOM이란 무엇인가요?

가상 돔(Virtual DOM)은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이다. 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능은 좋아진다.

---

Q19. 단방향 데이터 흐름

리액트에서 단방향 데이터 흐름이란 무엇인가요?

위(부모 요소)에서 아래(자식 요소)로만 props를 통해 데이터가 전달된다. 이러한 점의 이점은 데이터의 흐름이 일정하기 때문에 debugging에 용이하다.

---

Q20. fetch 함수

fetch 함수는 무엇인가요?

• HTTP 요청 전송 기능을 제공하는 Web API이다. (자바스크립트 내장 라이브러리)
• 백엔드로부터 데이터를 받아오려면 api를 호출하고 데이터를 응답 받는다. 이 때 자바스크립트 Web API fetch() 함수를 쓰거나 axios 라이브러리를 사용할 수 있다.

---

Q21. 코드리뷰

코드리뷰란 무엇인가요? 코드리뷰는 왜 필요한가요?

코드리뷰라 함은 간단히 말해, 내가 작성한 코드를 제3자가 검토하는 것이다. 이를 통해 더 나은 퀄리티의 코드로 거듭나는 것 뿐 아니라, 새로운 기술적인 지식을 얻을 수도 있고 혹은 내가 해결해야 하는 문제에 대해 새로운 관점을 습득 할 수도 있다.

---

Q22. json

json이란 무엇인가요?

네트워크를 통해 데이터를 주고받는 데 자주 사용되는 경량 데이터 형식이다. 변화하는 데이터를 넣음으로서 웹페이지가 항상 같은 내용이 아닌 변화되는 데이터에 따라 달라지는 동적 변화가 일어나는 웹사이트를 만들 수 있다.

---

Q23. json 목 데이터 VS javascript 목 데이터

json 목 데이터와 javascript 변수로 만든 목 데이터의 차이에 대해 설명해주세요.

JSON Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text 파일이라는 점이 다르다.

---

Q24. 인증 인가

인증 인가 흐름에 대해서 설명해주세요.

인증 : 사용자가 누구인지 확인하는 절차

인가 : 사용자가 요청하는 요청을 실행할 수 있는 권한 여부를 확인하는 절차