Q&A | React (면접 예상 질문)

---

- JSX란 무엇인가요?

• JavaScript Syntax Extension의 줄임말으로써, React에서 사용하는 자바스크립트 확장 문법입니다.
• JSX로 작성한 코드는 브라우저에서 동작하는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.

---

- React란 무엇인가요?

React 는 페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리 입니다.

---

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

React와 같은 프론트엔드 라이브러리 혹은 프레임워크를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점입니다. React는 가상 돔(Virtual Dom) 을 통해 UI를 빠르게 업데이트합니다. 가상 돔은 이전 UI 상태를 메모리에 유지해서, 변경될 UI의 최소 집합을 계산하는 기술이며, 이 기술 덕분에 불필요한 UI 업데이트는 줄고, 성능이 향상됩니다.

---

- CRA란 무엇인가요?

Create-React-App의 약자이며, 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain) 입니다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공해주며, CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있습니다.

---

- 컴포넌트란 무엇인가요?

• 컴포넌트 : 재활용 가능한 UI 구성 단위를 의미합니다.
• 컴포넌트의 특징
  • 재활용하여 사용할 수 있다.
  • 코드 유지보수에 좋다.
  • 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
  • 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)

---

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

CSS 전(예비)처리기CSS Preprocessor 의 일종으로써, CSS의 확장판이라고 볼 수 있습니다.
CSS가 동작하기 전에 사용하는 기능으로, 웹에서는 분명 CSS가 동작하지만 CSS의 불편함을 이러한 확장 기능으로 상쇄할 수 있으며, 주 기능으로 Nesting 과 MIXIN이 있습니다.

---

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

라우팅(Routing)이란 다른 경로(url 주소)에 따라 다른 View(화면)를 보여주는 기능으로, 리액트 자체에는 이러한 기능이 내장되있지 않습니다. 즉 이러한 부분을 보완해주기 위해 Routing 기능을 보완해주며 가장 많이 사용되는 라이브러리가 React Router입니다.

---

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

- 프레임 워크 : 프레임워크는 뼈대나 기반구조를 뜻합니다. 프로그래밍을 진행할 때 필수적인 코드, 알고리즘 등과 같이 어느 정도의 구조를 제공해주기 때문에 프레임워크를 사용하는 프로그래머는 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발합니다. 프레임워크는 완성된 제품이 아닌 완성된 제품을 만들기 위해서 개발자를 도와주는 또는 기반이 되는 역할을 합니다. 이를 소프트웨어적으로 다시 정의하면 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합입니다.


- 라이브러리 : 라이브러리는 특정 기능에 대한 도구 또는 함수들의 집합입니다. 프로그래머가 어떠한 기능을 수행하기 위해서 도움을 주는 또는 필요한 것을 제공해주는 역할을 해줍니다. 간단히 정리를 하자면 프로그램 기능 수행을 위해 활용 가능한 도구의 집합입니다.

⭐️ 라이브러리와 프레임 워크의 차이점 :

프레임워크와 라이브러리의 차이점은 흐름을 누가 지니고 있냐의 차이입니다. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있어 프로그래머는 그 안에서 필요한 코드를 작성합니다. 반면에 라이브러리는 프로그래머가 전체적인 흐름을 가지고 있어 라이브러리마다의 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있습니다.
즉, 프레임워크는 프레임워크라는 특정 공간에 들어가서 사용한다는 느낌이 더 강하다고 말할 수 있으며 라이브러리는 라이브러리 자체를 가져가 사용하고 호출하는 용도로 사용된다고 말할 수 있습니다.

---

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

• 프론트엔드 개발을 진행하려하는데 필요한 백엔드 API가 완성이 안되었을수도 있습니다.
• 이러한 경우에 백엔드에서 API가 완성될때까지 무작정 기다리는 게 아니라, mock data를 만들어 데이터가 들어오는 상황을 미리 대비하고 데이터에 맞게 UI가 의도한대로 구현되는지 먼저 확인해야 합니다.
• 특히나 프로젝트를 진행하는 경우 백엔드 API 유무에 상관없이 화면에 데이터를 예쁘게 보여주는 것이 프론트엔드 개발자로서 가져야 할 책임감 입니다.
• 또한 mock data를 만드는 과정에서 백엔드 API에서 보내주는 response가 어떤 형태인지, key-value값을 확인하고 미리 mock data와 백엔드 response의 형태를 맞춰보면서 개발을 진행한다면 추후 실제 API를 훨씬 수월하게 연결 할 수 있습니다.

---

- SPA란 무엇인가요?

Single Page Application (싱글 페이지 어플리케이션) 의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다.
SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.
주로 React-router에서 Routing시에 필수적으로 사용되는 기능입니다.

---

- useEffect는 무엇인가요?

useEffect란, React Component가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 hook의 일종입니다. useEffect는 컴포넌트가 mount,unmount,update 됐을 때, 특정 작업을 처리할 수 있으며, 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있도록 해준다는 장점이 있습니다.

---

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

Side effect란, 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위를 말합니다. 예시로 함수에서 전역변수의 값을 변경하거나 혹은 함수 외부에 존재하는 버튼의 텍스트를 변경하거나, 파일을 쓰거나, 쿠키 저장, 네트워크를 통해 데이터를 송신하는 것 등이 있습니다.


React에선 Side-Effect 처리를 위해 useEffect()함수를 사용하는데, 함수가 매개변수를 받아 결과를 생성하는 것과 무관한 외부의 상태를 변경하거나 외부와 상호작용해야 하는 코드는 useEffect() 함수를 통해 분리해야하기 때문에 side effect를 사용합니다.

---

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

두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props 는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state 는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.

---

- React의 특징은 무엇인가요? (연쇄 질문 가능)

⭐️ 리액트의 특징

• 컴포넌트 기반의 라이브러리
  : 헤더, 메인 콘텐츠, 버튼, 사이드바 메뉴 같은 것들을 헤더 컴포넌트, 사이드바 컴포넌트와 같이 하나의 컴포넌트로 묶어서 관리할 수 있다. 따라서 리액트를 개발하다가 특정 부분에서 오류가 생기면 그 컴포넌트만 수정하여 사용할 수 있다. 코드의 재사용성과 유지보수성을 증가시켜 준다.
  
  
• 단방향 데이터 바인딩(One Way Data Flow)
  : 리액트는 데이터의 흐름이 한 방향으로만 흐른다. 데이터가 내려가기만 하고 밑에서 데이터를 올려줄 수 없기떄문에 부모의 데이터를 바꾸기 위해서는 state를 이용해야 한다.
  
  
• Props and State :
  • Props: 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터이다. 자식 컴포넌트에서 전달 받은 props는 변경이 불가능하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
  • State: 사용자와의 상호작용을 통해 데이터를 동적으로 변경해야 하는 것과 같이 동적인 데이터를 다룰 때 사용한다.
    각각의 state는 독립적이라 다른 컴포넌트에 직접적인 접근은 불가능하다. 그러나 자신보다 상위에 있는 state는 변경이 가능하지만 state를 변경해주는 함수를 props로 받는다면 state의 변경이 가능하다.
  
  
• Virtual DOM
  : 가상의 Document Object Mode.로 실제 DOM을 조작하는게 아닌, DOM을 추상화 한 자바스크립트 객체를 구상해 사용한다.
  ※ DOM(Documnet Object Model)?
  : JavaScript Node 개체의 계층화된 트리로, HTML, XML 문서의 프로그래밍 API이다. 문서의 구조화된 표현을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다.

⭐️ 리액트의 장점과 단점

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

• 단점
  • 보여지는 부분에만 관여하기때문에 데이터 모델링, Routing, Ajax 등등의 기능을 제공하지 않는다.
  • view 외 기능들은 직접 구현하거나 라이브러리를 사용하여 구현해야 하기 때문에 JavaScript 배경지식이 부족할 경우애는 사용이 힘들다.
  • IE8 이하 버전들을 지원하지 않는다.

---

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

state를 선언하기 위해 사용하는 훅은 useState()입니다. 사용 방법은 아주 간단하며 useState()를 사용해 선언합니다. 이때 배열을 사용하며 첫 번째는 state가 저장될 이름을 두 번째는 값을 업데이트 할 메소드가 위치하게 됩니다.

const [ name, setName ] = useState("Changmo"); // 사용 예시

---

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

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

const array1 = [1, 4, 9, 16];
// pass a function to map
const map1 = array1.map(x => x * 2);
console.log(map1);
// expected output: Array [2, 8, 18, 32] // 사용 예시

---

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

=> 아래의 코드 예시와 같이, onClick method를 통해 구현할 수 있으며, 이외에도 useState() 훅을 활용해 구현할 수 있습니다. 또한 alert에 관한 함수를 상단에 지정해주어 onClick 이벤트 발생시에 추가시에 구현이 가능합니다.

<button onClick={alert("버튼을 누르셨습니다.")}>alert</button>

---

- Virtual DOM이란 무엇인가요?

DOM을 추상화한 가상의 객체, 즉 가상의 DOM을 의미합니다.
Virtual Dom(이하 가상 DOM)은 수정사항이 여러 가지 있더라도, 가상 DOM은 한 번만 렌더링을 일으킵니다.

---

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

단방향 데이터 흐름이란 부모로부터 자식으로만 데이터가 전달이 가능함을 의미합니다. 이는 유지보수를 좀 더 편리하게 만들어줍니다.
단방향 데이터 흐름은 관리하기가 쉬우며, 버추얼 돔(Virtual DOM)과 궁합이 잘 맞습니다. 뷰를 통째로 바꾸어주는 역할을 하기 때문에 단방향 데이터 방식은 DOM을 갱신할 때 큰 장점이 있습니다. 이러한 단순한 데이터 흐름은 이해하기 쉽고 관리하기에 좋은 장점이 있습니다.

---

- fetch 함수는 무엇인가요?

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

---

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

코드 리뷰를 통해서 얻을 수 있는 것은 매우 많습니다. 더 나은 퀄리티의 코드로 거듭나는 것 뿐 아니라, 새로운 기술적인 지식을 얻을 수도 있고 혹은 내가 해결해야 하는 문제에 대해 새로운 관점을 습득 할 수도 있습니다. 그렇기 때문에, 대부분의 기업에서는 필수적으로 코드 리뷰 문화가 존재합니다.

---

- json이란 무엇인가요?

• JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식
• Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
• JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다.
• JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.

---

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

JS Object는 JS Engine 메모리 안에 있는 데이터 구조이고, JSON은 객체의 내용을 기술하기 위한 text 파일이라는 점이 다릅니다. JSON은 "파일"이므로 확장자 명이 .JSON인 파일이 존재합니다.
즉, JS Object로 HTTP 통신을 하는 것이 아니라, JSON으로 서버와 클라이언트가 데이터를 주고 받는다는 것입니다.

---

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

인증(Authentication)

인증(Authentication)은 유저의 identification을 확인하는 절차입니다. (유저의 아이디와 비밀번호를 확인하는 절차)

:: 인증(로그인) 절차

1. 유저 아이디와 비밀번호 생성
2. 유저 비밀번호를 암호화 해서 DB에 저장 (회원가입)
3. 유저 로그인 -> 아이디와 비밀번호 입력
4. 유저가 입력한 비밀번호 암호화 한후 암호화되서 DB에 저정된 유저 비밀번호와 비교.
5. 일치하면 로그인 성공
6. 로그인 성공하면 access token을 클라이언트에게 전송.
7. 유저는 로그인 성공후 다음부터는 access token을 첨부해서 request를 서버에 전송함으로서 매번 로그인 해도 되지 않도록 한다.

인가(Authorization)

인가(Authorization)은 유저가 요청하는 request를 실행할 수 있는 권한이 있는 유저인가를 확인하는 절차입니다 예를 들어, 해당 유저는 고객 정보를 볼 수 있는 있지만 수정 할 수는 없다 와 같이 사용자가 할 수 있는 행동을 제한하는 역할을 하기도 합니다.

:: 인가(Authorization) 절차

1. Authentication 절차를 통해 access token을 생성한다. access token에는 유저 정보를 확인할 수 있는 정보가 들어가 있어야 한다 (예를 들어 user id).
2. 유저가 request를 보낼때 access token을 첨부해서 보낸다.
3. 서버에서는 유저가 보낸 access token을 복호화 한다.
4. 복호화된 데이터를 통해 user id를 얻는다.
5. user id를 사용해서 database에서 해당 유저의 권한(permission)을 확인하다.
6. 유저가 충분한 권한을 가지고 있으면 해당 요청을 처리한다.
7. 유저가 권한을 가지고 있지 않으면 Unauthorized Response(401) 혹은 다른 에러 코드를 보낸다.

---