react 관련 면접

면접준비 💯

🏳️ react 면접을 준비해보자. 나의 말투로 정리를 해봐야겠다.

• JSX란 무엇인가요?

자바스크립트 익스텐션, JS의 확장된 문법으로 JS코드를 HTML처럼 표현가능하게 해주는것입니다. (HTML을 작성하는것과 유사하기때문에 컴포넌트를 생성하기 좋습니다. 이러한 이유로 react에서는 jsx의 사용을 권장하고 있습니다.)

• React란 무엇인가요?

JS의 라이브러리 중 하나로써 주로 사용자 인터페이스를 만들기 위해 사용됩니다.

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

보다 쉽게 사용자 인터페이스를 만들 수 있기때문에 사용합니다. react는 가상돔이라는 개념을 사용하여 지속적으로 빠르게 변화하는 웹어플리케이션과 같은 퍼포먼스에 최적화되어있습니다.

• CRA란 무엇인가요?

create react app이라는 뜻으로 react 초기설정의 어려움을 덜어주기위해 CRA라는 명령어로 기초 개발환경을 셋팅해 줄 수 있습니다.

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

컴포넌트란 프로그래밍에 있어 재사용이 가능한 각각의 독립된 모듈입니다. react에서는 앱을 이루는 최소한의 단위로 데이터를 입력받아 DomNode를 출력하는 함수입니다.

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

Sass는 css의 전처리기로 네스팅, mixin, 변수 등을 지원하기 때문에 코드의 재활용성을 높여주고, 코드 가독성 높여주기 때문에 코드를 유지보수 하기 쉽게해줍니다.

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

react-router는 써드파티 라이브러리로 주소에 따라 다른 뷰를 보여주는 기능을 가지고 있습니다. 리액트 자체에는 이 기능이 내장되어있지 않기때문에 사용됩니다.

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

라이브러리는 단순활용가능한 도구들의 집합이고 프레임워크는 이러한 라이브러의 컬렉션이라고 할 수 있습니다. 차이점으론 프레임워크는 제어흐름의 주도성이 프레임워크 스스로 가지고 있는반면, 라이브러리는 사용자가 제어흐름을 주도하고 있다는 것입니다.

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

mock data는 단어 그대로 가짜 데이터라는 뜻입니다. 사용하는 이유는 프로젝트를 진행하다보면 API가 나오기 전에 페이지 레이아웃이 먼저 나오는 경우가 대부분이기 때문에 Mock Data를 활용해 데이터가 계획된 대로 레이아웃에 잘 나타나는지를 테스트하기 위함입니다.

• SPA란 무엇인가요?

페이지가 하나로 구성된 웹 어플리케이션 입니다. SPA는 필요한 데이터만 서버로부터 JSON으로 전달 받아 동적으로 렌더링하는 특징을 가지고 있기때문에 트래픽이적고 페이지 이동이 빠릅니다.

• useEffect는 무엇인가요?

렌더링이 일어난 직후 어떤 일을 수행해야 하는 지를 설정하는 react의 훅입니다.

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

컴포넌트가 화면에 렌더링 된 이후에 비동기적으로 처리되어야하는 일이 필요할때 발생해야합니다. 예를들면 Data Fetching, DOM에 직접 접근(ex. Event Listener 등록), 구독(ex. setInterval) 이있습니다.

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

state는 현재컴포넌트의 상태값이고 언제든지 변할 수 있습니다. 반면 props는 부모컴포넌트로 부터 전달받은 값으로 불변입니다.

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

useState라는 훅(기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게해주는 기능)을 사용합니다. useState란 현재상태값 변수와 그 상태값을 변경할 수 있게 해주는 setter함수를 반환하는 함수입니다.

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

react는 jsx와 단뱡향데이터바인딩을 사용하고 가상돔이라는 개념을 사용하여 웹어플리케이션 퍼포먼스를 최적화시킬 수 있는 특징이있습니다.

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

배열에 사용할 수 있는 내장메서드입니다. map의 기능으로는 콜백함수를 각각의 요소에대해 한번씩 순서대로 불러 그 함수의 return값으로 새로운 배열을 만드는것이고, 문법은 callback함수를 매개변수로 받으며 callback함수는 요소,인덱스,map을 호출한 배열 이렇게 3가지를 인자로 받습니다.

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

JS처럼 버튼의 onClick이벤트에 alert함수를 호출하면, 페이지가 랜더링될때 alert이 팝업되고 버튼을 눌러도 아무런 응답이 없을것입니다. 이유는 페이지가 랜더링될때 함수가 호출되고 호출의 결과인 'undefined'가 onClick이벤트에 남기때문입니다. React는 이벤트가 발생했을 때 표현식에 정의된 함수를 자동으로 호출해주기 때문에 함수의 호출이 아닌 정의, 즉 함수 그자체를 써주면 됩니다.

• Virtual DOM이란 무엇인가요?

DOM의 상태를 메모리에 저장하고 변경 전과 변경 후의 상태를 비교한 뒤 최소한의 내용만 반영 하는 기능입니다.

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

단방향 데이터 흐름이란 쉽게말해 부모로부터 자식으로만 데이터가 전달이 가능하다는 뜻입니다 . 이러한 방식은 코드를 이해하기 쉬워 데이터의 추적과 디버깅, 유지보수가 편합니다.

• fetch 함수는 무엇인가요?

JS의 내장함수로 비동기적으로 서버와 네트워크 요청을 보내고 응답을 받을 수 있습니다. fetch는 promise를 반환하기때문에 async/await을 사용할 수 있습니다.

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

개발자들 끼리 서로 만든 코드를 점검하고 피드백을 주는 과정입니다. 팀의 협업과 서로가 작성한 코드의 이해도를 높여주고 버그와 의도하지 않은 동작을 조기 발견하고 예방할 수 있기때문에 필요합니다.

• json이란 무엇인가요?

텍스트를 기반으로하여 key와 value로 구성되었고 서버와 통신을 하기위한 markup언어입니다.

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

상수 데이터는 변수에 저장된 값을 사용하는 반면 json mockdata는 실제 http통신을 하는것과 같은 방식으로 데이터를 활용하는 차이점이 있습니다.

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

인증은 사용자가 누구인지 확인하는 절차이고 인가는 사용자가 요청하는 요청(Request)을 실행할 수 있는 권한 여부를 확인하는 절차입니다. 사용자에게서 아이디, 비밀번호를 입력받아 DB에 저장된 데이터와 일치하는지 비교 후 일치한다면 access token을 틀리다면 로그인실패메세지를 보내고, token을 통해 사용자의 권한을 확인하고 요청을 승인할지 거부할지 판단한다.