[기술면접] 리액트

리액트란 무엇인가?

• user interfaces를 만들기 위한 자바스크립트 기반 라이브러리입니다.

• 페이스북에서 어떻게 하면 UI를 빠르게 만들고 어떻게 하면 사용자의 이벤트에 즉각적으로 반응해서 UI를 업데이트 할 수 있을까? 어떻게 간편하게 이런 어플리케이션을 만들 수 있을까 고민을 하여 만들어졌습니다.

• 리액트는 component의 모음이라고 볼 수 있는데, UI를 컴포넌트 단위로 보여주고 이벤트에 반응하도록 만들어가는 라이브러리입니다.

• 정리 : 리액트는 UI를 만들 수 있게 해주는 라이브러리인데, 웹뿐만아니라 모바일 앱을 손쉽게 만들 수 있게 해줍니다. 그리고 심플한 정적사이트 뿐만 아니라 규모가 큰 사이트까지 리액트를 사용해서 만들 수 있습니다.

SPA와 CSR

• SPA : Single Page Application의 약자이며, 사용자가 버튼을 클릭했을 때 다른 페이지를 다운로드 받아서 깜빡거리면서 리프레쉬 되는 것이 아니라 한 어플리케이션내에서 컴포넌트를 보여주고 숨기고 페이지내에서 자유자재로 네비게이션 할 수 있습니다.

• CSR : Client Side Rendering의 약자이며, 사용자가 웹 어플리케이션에 접속했을 때 즉각적으로 HTML을 보는 것이 아니라 작성자가 만든 코드인 자바스크립트뿐만 아니라 리액트 라이브러리도 전부 다운로드 받아서 사용자 화면에 UI가 표기되기때문에 클라이언트측에서 렌더링이 이루어집니다.

Component

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 리액트에서 component는 함수로 정의합니다.
• 리액트 컴포넌트는 render, state, props 로 구성되어 있습니다.
• 좋은 컴포넌트란 다른 컴포넌트들과 연결되어 있지 않고 독립적이며 재사용성이 높아야합니다.
• 컴포넌트를 나눌 때에는 재사용성을 고려합니다. 코드를 작성할 때는 반복하지 말고 재사용 가능한 로직이나 코드들은 재사용해야합니다.
• 단일책임(SR : Single Responsibiloity)을 고려해야 합니다. 재사용할 확률은 낮더라도 한 컴포넌트 안에서 많은 UI코드나 로직을 가져 다양한 일들을 하게 된다면 컴포넌트로 나누는게 좋습니다.

리액트 동작 원리

• 함수형 컴포넌트 안에서 보여줄 UI를 return 해주는데, 여기에서 사용하는 문법은 JSX(JavaScript XML) 문법입니다. JSX는 HTML과 거의 똑같이 생겼기 때문에 사용하기 편리합니다.

• 컴포넌트가 가지고 있는 데이터(내부 상태), 즉 상태가 변하면 리렌더링 되는데 이 상태를 useState Hook으로 관리합니다. 변수형태로 상태값을 저장합니다.

• 외부에서 속성값을 전달할 수 있는데 properties(props : 외부로부터 전달받은 상태) 라는 함수의 인자로 전달할 수 있습니다.

• 리액트는 바로 DOM Tree에 있는 브라우저를 변경해주는 것이 아니라 가상의 DOM Tree와 예전의 DOM Tree를 비교해서 변경된 것만 브라우저의 DOM Tree 요소를 업데이트 합니다.

리액트 Hooks란 무엇인가?

• 클래스형 컴포넌트의 this 바인딩 이슈, 로직 재사용 어려움 등의 단점 때문에 함수형 컴포넌트가 생기게 되었는데 함수형 컴포넌트에서 리액트 Hooks을 이용해서 로직들을 재사용할 수 있게 되었습니다.

• 즉 재사용 가능한 함수입니다.

• useState, useEffect, useRef 등 use로 시작합니다.

• 대표적으로 많이 사용하는 상태관리 로직인 useState, 컴포넌트 생애주기 관리 로직인 useEffect가 있습니다.

• 직접 정의해서 사용할 수 있는 커스텀 훅을 만들수 있습니다.

• Hooks(함수)는 값의 재사용이 아니라 로직의 재사용을 위한 것이다.