React의 개념과 장점, 그리고 컴포넌트란 무엇인가요?
리액트는 페이스북이 UI를 작업하기 위한 자바스크립트 라이브러리입니다. 자바스크립트로 DOM을 컨트롤하여, UI를 동작하게 하는데, 이때 버츄얼 돔이라는 가상의 돔을 동작하게 해서 실제돔에 대한 조작을 최소화 하기 위해 현재 내용과 전체 내용에서 UI적으로 변경된 부분만 비교해서 실제돔에 적용함으로써 최소한의 동작을 통해서 서비스의 효율을 높여준다는것이 리액트의 주된 장점입니다.
React의 내부 작동 원리를 설명해주세요.
리액트는 돔을 직접 조작하지 않습니다. 가상 DOM을 다루며 리액트가 가상 DOM을 생성하고 브라우저가 이를 렌더링하도록 하는 방식으로 작동합니다. 가상 DOM을 리액트 엘리먼트라고 합니다. 리액트 엘리먼트는 자바스크립트 객체 이며 이러한 객체인 리엑트 엘리먼트를 직접 조작하는게 빠르다고 알고있습니다.
CRA 란 무엇인가요?
Create-React-App의 약자이며, 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain) 입니다. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공해주며, CRA를 이용하면 하나의 명령어로 리액트 개발환경을 구축할 수 있습니다.
라이브러리와 프레임워크의 차이점은 무엇인가요?
프레임워크와 라이브러리의 차이점은 흐름을 누가 지니고 있냐의 차이입니다. 프레임워크는 전체적인 흐름을 자체적으로 가지고 있어 프로그래머는 그 안에서 필요한 코드를 작성합니다. 반면에 라이브러리는 프로그래머가 전체적인 흐름을 가지고 있어 라이브러리마다의 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있습니다.
즉, 프레임워크는 프레임워크라는 특정 공간에 들어가서 사용한다는 느낌이 더 강하다고 말할 수 있으며 라이브러리는 라이브러리 자체를 가져가 사용하고 호출하는 용도로 사용된다고 말할 수 있습니다.
재조정의 개념에 대해서 설명해주세요.
컴포넌트의 state나 props가 변경될 때 새로 반환되는 엘리먼트 트리와 이전 엘리먼트 트리를 비교하여 변경점을 파악하고, 그 변경점에 대해서만 DOM을 부분적으로 일괄 갱신하는것을 말합니다.
React에서 lifecycle 과 각 life cycle의 역할을 설명하세요.
lifecycle이란 리액트는 컴포넌트 기반의 View를 중심으로 한 라이브러리이다. 그러다보니 각각의 컴포넌트에는 라이프사이클 즉, 컴포넌트의 수명 주기가 존재한다. 컴포넌트의 수명은 보통 페이지에서 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝이난다.
리액트 사이클의에는 크게 3가지 유형으로 나눌수있다. 데 생성 될때, 업데이트 할 때, 제거할 때이다. 이를 리액트에서는 마운트, 업데이트, 언마운트라고 한다. 여기서 마운트는 DOM이 생성되고 웹 브라우저 상에서 나타나는 것을 뜻하고, 반대로 언마운트는 DOM에서 제거되는 것을 뜻한다.
업데이트는 다음과 같은 4가지 상황에서 발생한다.
1. props가 바뀔 때
2. state가 바뀔 때
3. 부모 컴포넌트가 리렌더링 될 때
4. this.forceUpdate로 강제로 렌더링을 트리거할 때
class component의 생명주기 메소드에 대해서 설명하세요.
생명주기 메서드는 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다. 생명주기 메서드는 클래스형 컴포넌트에서만 사용 할 수 있습니다.
React Router 같은 Client Side Routing에 대해서 설명하시오
리액트는 SPA (Single Page Application) 방식 새로운 페이지를 로드하지 않고 하나의 페이지 안에서 필요한 데이터만 가져오는 형태를 가진다. 이러한 React-Router는 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. 리액트 라우터나 클라이언트 사이트 라우팅은 렌더링되는 데이터의 양이 적기 때문에 구성요소 간 라우팅의 속도가 빠릅니다. 나머지 데이터는 DOM에 의해 렌더링되며, 렌더링해야 할 HTML과 CSS가 많아도 DOM은 빠르게 렌더링이 됩니다. 많이 사용하는 라우터 컴포넌트로는 BrowserRouter와 HashRouter가 있습니다.
그렇다면 SPA는 무엇인지 설명해주세요.
Single Page Application (싱글 페이지 어플리케이션) 의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다. SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.주로 React-router에서 Routing시에 필수적으로 사용되는 기능입니다.
state 와 props의 차이는 무엇인가요?
Single Page Application (싱글 페이지 어플리케이션) 의 약자로써, 말 그대로, 페이지가 1개인 어플리케이션을 의미합니다.
SPA는 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식이며, 웹 사이트의 전체 페이지를 하나의 페이지에 담아 동적으로 화면을 바꿔가며 표현합니다.
주로 React-router에서 Routing시에 필수적으로 사용되는 기능입니다.
state를 직접 변경하지 않고 setState를 사용하는 이유는?
두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있습니다. props 는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state 는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리됩니다.
prop Drilling 이란 무엇인가요?
오로지 하위 컴포넌트로 전달하는 용도로만 쓰이는 컴포넌트들을 거치면서 React Component 트리의 한 부분에서 다른 부분으로 데이터를 전달하는 과정을 프롭 딜링 이라고 합니다.
React Hook의 장점은 무엇인가요?
로직의 재사용이 가능하고 관리가 쉽습니다. 함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들어 볼 수도 있습니다. function component에 hook이 도입되며 class component가 가지고 있는 기능을 모두 사용할 수 있음은 물론이고 기존 class component 복잡성, 재사용성의 단점들까지 해결됩니다.
클래스 컴포넌트와 함수 컴포넌트의 차이점은?
클래스 컴포넌트는 React Life Cycle과 State를 사용할 수 있습니다.
함수형 컴포넌트는 클래스 컴포넌트 보다 메모리를 덜 사용합니다.
함수 컴포넌트는 메모리 효율이 좋았지만 이는 스테이트를 사용하지않고 라이프 사이클도 사용할 수 없었기에 이러한 단점을 보안하기 위해서 나온것이 훅입니다.
가상돔은 무엇이며, 가상돔이 좋은 이유는 무엇인가요?
virtualDOM을 이용하는 이유는 효율성 때문입니다. Virtual DOM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다. virtualDOM을 활용하면 실제 DOM을 직접 바꾸는 것보다 시간 복잡도가 현저히 낮아집니다.브라우저에 많은 변화가 생기면 DOM 노드가 변경되고 그 이후의 든 필요한 돔을 새로 만드는 과정이 다시 이루어 집니다.이러한 복잡한 과정때문에 돔을 새로만드는 과정은 성능을 저하 시킵니다. 하지만 Virtual DOM은 뷰에 변화가 있다면, 그 변화가 실제 DOM에 적용되기 전에 Virtual DOM에 적용시키고 최종 결과만 실제 DOM에 전달하기 때문에 실제 돔은 해당 변화된 부분만 가려 실제 돔으로 전달하고 변화된 부분의 렌더링과정만 거치게 되어 효율적입니다.
JSX란 무엇인가요?
JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
React 엘리먼트를 생성하는 언어입니다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능합니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다. 하나의 파일에 Html 과 js 를 동시에 작성하여 편리하다는 장점이 있습니다
리액트를 사용해 웹을 최적화 해본 경험이 있나요?
웹 성능 향상을 위해 불필요하게 돔을 렌더링 하는 이슈를 트래킹 하여 개선한적이 있으며, 불필요한 클라이언트에서 일어나는 알고리즘 재귀함수를 개선해본 경험 또한 있습니다.
useMemo와 useCallback 메소를 확용해 최적화 하는 원리
usememo는 기존에 연산의 결과값을 어딘가에 저장해놓고 동일한 입력이 들어오면 재활용하는 프로그래밍 기법으로 중복연산을 피할 수 있기 때문에 메모리를 조금 더 쓰더라도 에플리케이션을 최적화 할 수 있습니다. useMemo는 렌더링을 할 때마다 메모리가 많이 소모되는 값은 계산하지 않고 함수형 components를 최적화하는데 도움을 줍니다. dependency 리스트를 생성해 그 중 하나가 변경되면 바로 값을 계산합니다. useCallback도 useMemo와 비슷합니다. useMemo는 값을 기억하는 대신 useCallback은 함수를 기억합니다.
React에서 상태 변화가 생겼을때, 변화를 어떻게 알아채는지?
React의 state는 불변성을 가져야 하기 때문에 state를 직접 수정하면 안되고 새로운 state를 생성하여 새로운 상태 객체의 주소값으로 변경되는 것으로 상태 변화를 감지할 수 있습니다.
리액트의 상태관리 라이브러리에 대해서 설명하세요.
redux는 Flux 아키텍처를 기반으로 하며 리액트에서 가장 많이 사용되는 상태관리 라이브러리입니다. 하나의 store를 가지며 store의 데이터는 불변성을 가집니다. 몹엑스는 여러 개의 store를 가질 수 있고, 상태 값은 mutable(뮤터블)하게 변경이 가능합니다. 또한 redux는 비동기 처리를 위해 별도 라이브러리 설치가 필요한 반면, mobx는 async/await 문법의 사용이 가능합니다. redux가 REST API를 사용하기 때문에 엔드포인트 증가 및 오버페칭 등의 문제가 있는 반면, apollo는 grapql을 기반으로 하며 서버에서는 사용할 수 있는 자원을 정의하고 클라이언트에서는 필요한 데이터를 호출하는 방식이기 때문에 매우 효율적입니다.
useEffect 메소드로 componentWillUnmount가 동작할 수 있는 방법은?
useEffect 내부에서 함수를 return하여 componentWillUnmount가 동작하도록 만들 수 있으며 unmount 시에 함수를 제거하도록 하는 등의 처리를 할 수 있습니다. 이것을 cleanup이라고도 하며 이를 통해 메모리 누수를 방지하고 불필요하거나 원치않는 동작을 제거할 수 있습니다.
map 함수가 무엇인가요?
map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해줍니다.
json이란 무엇인가요?
JavaScript Object Notation라는 의미의 축약어로 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 Javascript에서 객체를 만들 때 사용하는 표현식을 의미한다.
JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아서, 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용한다. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를 표시하는 표현 방법일 뿐이다.
브라우저가 렌더링되는 과정에 대해서 설명하세요.
