리액트의 기본 개념과 알아야 할 사항 정리!!🌈

 

📙 리액트란?

•  리액트는 2011년 페이스북의 개발자들에  의해 탄생한 자바스크립트 라이브러리로서,  웹/모바일 애플리케이션의 뷰를  개발할 때 사용된다. 리액트는 컴포넌트에 기반한 접근 방식으로 사용하므로 , 재사용 가능성이 높은 컴포넌트를 개발 할 수 있다.

 

📙 가상 DOM 이란?

• 가상 DOM은 그에 대응하는 실제 DOM을 그대로  복사한 자바스크립트  객체로서,  요소 및 어트리뷰트와 프로퍼티로 구성된  노드 트리라고 할 수 있다. 리액트의 render 함수를 사용하여 노트 트리가 생성되면, 데이터 모델의 변경사항을 기반으로 이 노드 트리 즉 가상 DOM이 업데이트 된다.

✅ attribute 어트리 뷰트란? :  HTML 문서에서의 정적인 요소

ex) <div class = 'box ' > </div> 

= > class = attribute 이다.

 

✅ property  프로퍼티 란? HTML 문서에서 동적인 속성

= 자바스크립트는 정적인 문서인 HTML을 동적으로 동작할 수 있게끔 하는것이다.

그러한 동적인 소석을 부여하는 것이 바로 property이다.

 

html 문서 안에서는 class 가 어트리뷰트를 의미하지만

html DOM 안에서는 프로퍼티로 의미하는걸 볼 수 있습니다.

 

😥 같은의미 아닌가요?

NO!  예시로 인풋 창이 있다고 가정 합니다.

초기의 value 값이  default 라는 값이 들어가져 있습니다. 이게 프로퍼티 이겠죠?

그 상황에서 input 값을 yougseongvelog 라고 변경 시켜보면 위의 DOM값이 변화한걸 확인  할 수 있습니다.

즉 html에서의 value는 default어트리뷰트 이고(정적) DOM에서의 변환된 input값은 프로퍼티 라고 할 수 있죠

 

📙 리액트의 주요 특징

•  리액트는 단방향식 데이터  흐름 모델을 사용한다. 컴포넌트는 자신의 state를 자식컴포넌트에  props로 전달가능하다. 모든 state는 항상 특정한  컴포넌트가 소유하고 있으며 그 state로부터 파생된 UI 또는 데이터는 오직 트리구조에서 자신의 '아래'에 있는 컴포넌트에만 영향을 미친다.
•  리액트는 가상 DOM을 사용한다.

📙 JSX 란?

• JSX는 자바스크립트 코드를 HTML 처럼 표현할 수 있는 React 엘리먼트를 생성하는 언어 입니다.

 

📙 브라우저가 JSX 파일을 읽을 수 있는가?

•  브라우저는 JSX 파일을 직접 읽을 수는 없다. 브라우저가 JSX  파일을 읽으려면 JSX를 자바스크립트로 변환을 해야한다. 그리고 그 변환 작업은 바벨과  컴파일러를 통해 이루어 진다.
• 여기서 기존에  JSX 를 사용한 파일 내에서 React를 import 했던 이유를 알 수 있다.
• 컴파일러를 통해 JSX코드가 자바스크립트코드로 변환이 되면 아래의 코드와 같이 React.createElement()로 변환이 된다.

import React from 'react';

function App() {
  return <h1>Hello World</h1>;
}


↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓
import React from 'react';

function App() {
  return React.createElement('h1', null, 'Hello world');
}

 

 

📙 리액트가 널리 사용되는 이유는?

• 리액트는 애플리케이션 구축을 할 때 다양한 이점을 제공하기 때문에 널리 사용된다.
  • 동적 페이지(유저 인터랙션에 따라 페이지 구성을 달리 해주어야 하는 페이지)의 유저 인터페이스를 효율적으로 유지보수 및 관리 할 수있다.
  • 구체적으로는 컴포넌트 기반 아키텍처 이므로 재사용 가능한 컴포넌트를 개발하고 여러 부분에서 가져다 사용할 수 있어 개발 생산성이 높고 유지보수가 용이하다.
  • HTML 문법과 유사한 JSX 를 사용하기 때문에  HTML 을 작성하듯 코드를 수행할 수 있어 편리하고 가독성이 좋다
  • 동적 페이지에선 유저 인터랙션에 의한 view의 변화가 빈번하다.
  • 리액트에선 가상 DOM을 사용해서 , 최종적인 변화만을 실제 DOM에 전달하기 때문에 연산 비용이 비교적 적게 든다.

📙 리액트를 사용할 때의 단점은 없는가?

• 앵귤러와 같은 프레임 워크와 비교하자면 리액트는 단순 라이브러리 이기 때문에 , 더많은 기능을 사용하고자 한다면Redux, Router등 많은 dependencies(의존성 모듈) 이 필요하다.
• 단반향 데이터 바인딩만 제공하는 것이 복잡도를 줄이기 때문에 장점이기도 하지만 양방향 바인딩에 비해서 더 많은 양의 코드를 작성해야 하므로 불편할 수 있다.

📙 리액트의 '컴포넌트 기반 아키텍처'의 의미

• 리액트에서 컴포넌트는 애플리케이션 UI 구축의 기반이다. 컴포넌트 기반 시스템이 구축되면, 각각의 개별적인 구성 요소들은 재사용이 가능하며 서로 독립적으로 존재한다. 즉 구성 요소 간 서로 의존하지 않으며 애플리케이션의 UI 개발이 용이 해진다.

📙 리액트에서  렌더링이 어떻게 동작하나?

• 리액트에서는 모든 컴포넌트가  렌더링이 되어야 하기 때문에 렌더링이 매우 중요하다.
• 리액트에서  렌더링은 render() 함수를 통해 이루어 지는데, 이 함수가  호출되면 DOM 요소를 나타내는 요소가 반환된다.
• 한번에 둘 이상의 HTML 요소를 렌더링 하는 것도 가능하다. HTML 요소들을 여는 태그 닫는태그로 감싸면 즉 enclosign tag로 감싸면 여러  요소를 동시에 렌더링  할 수 있다.

📙 리액트에서 state와 props의 차이는 무엇인가요?

 popst는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터 입니다. props는 수정이 불가하며 직접 쓰이거나 다른 값을 계산하는데 사용됩니다. state는 컴포넌트의 생명주기 동안에 수정 될 수 있는 내부 데이터로, 재 렌더링 시에도 유지 됩니다.

 

 

📙 리액트의 개념과 장점, 그리고 컴포넌트란 무엇인가요

1. React는 UI를 구축을 하기 위한 자바스크립트 프론트엔드 라이브러리 입니다.
2. 주로 Single Page Application을 만들때 사용 됩니다.
3. React의 장점에는 virtual Dom (가상돔)을 사용해서 어플리케이션 성낭을 향상 시키고 클라이언트 사이드 렌더링이 가능합니다. 또한 다른 프레임 워크와도 사용이 가능하며, 컴포넌트의 가독성을 높이며 유지보수가  쉽습니다.
4. 여기서 컴포넌트란, 레고  블럭과 같이 작은 단위로 만들어서 그것을 조립하는것처럼 개발하는 방법 입니다.
5. 컴포넌트를 사용한다면 캡슙화,확장성,결합성, 재사용성과 같이 이점이 있습니다.

📙 리액트의 내부 작동원리를 재조정 개념과  함께  설명 하세요.

React에서 DOM을 어떻게 렌더링 하고 브라우저 이벤트를 처리하나요?

1. 실제로 DOM을 제어하지 않고 중간에 virtual  DOM을 두어 virtual DOM이 변경될때 ,
2. 실제 DOM을 변경하도록 하게되어 있습니다. 이작업을 Reconclilation 이라고 합니다.
3. virtual DOM을 갱신하는 방법에는 setState( ) 메소드를 호출하는 방법과 redux의 경우처럼 store가 변하는
4. 다시 최상위 컴포넌트의 render( ) 함수를 호출해서 갱신하는 방법이 있습니다.

 

📙 리액트에 있는 라이프 사이클과 각 라이프 사이클의 역할을 설명하세요.

 

리액트의 라이프 사이클은 크게 4가지로 설명할 수 있습니다.

최초로 컴포넌트 객체가 생성될 때 한 번 수행되어지는 componentDidMount( ) 와

초기에 화면을 그려줄 때와, 업데이트가 될때 호출되면 render( ) 가 있습니다.

그리고 컴포넌트의 속성 값 또는 상태값이 변경되면 호출되어지는 componentDidUpdate( ) 와 마지막

컴포넌트가 소멸될때 호출되어지는 componentWillUnmount ( ) 가 라이프 사이클의 역할 입니다.

 

 

📙 state를 직접 변경하지 않고 setState를 사용하는 이유

 

state는 불변성을 유지해야 하기 때문입니다. 컴포넌트는 setState를 비교해서 업데이트가 필요한 경우에만
render 함수를 호출 하는 데 state를 직접 수정하게 되면 리액트가 render 함수를 호출하지 않아 상태 변경이 일어나도 렌더링이 일어나지 않을 수 있습니다.

📙 React hooks의 장점

Hooks의 장점은 로직의 재사용이 가능하고 관리가 쉽습니다.
함수 안에서 다른 함수를 호출하는 것으로 새로운 hook을 만들어 볼 수 있습니다.
기존 class component가 가지고 있는 기능을 모두 사용하고 복잡성 재사용성의 단점들까지 해결하게 되었습니다.

📙 Class Component와 Function Component의 차이점에 대해서 설명하세요.

clss component는 여러 단계의 상속으로 이루어져 있습니다.
그리하여 복장성과 오류 가능성을 증가 시켰습니다.
이로인해 function component가 탄생하게 되었고
class component는 라이프 사이클을 가지며 이로인해 각각 생명주기 메소드에 대해 알고있어야 합니다.
하지만 function component는 이러한 기능을 hook을 사용하여 생명주기에 원하는 동작을 하게 합니다.

📙 virtual DOM이 무엇인가요? virtual DOM이 좋은 이유에 대해서 설명하세요.

virtual DoM은 실제 DOM 변화를 최소화 시켜주는 역할을 합니다.
virtual DOM을 사용하는 이유는 효율성 때문 입니다. virtual DOM을 활용하면 실제 DOM을 바꾸는 것보다 시간 복잡도가 낮아집니다. 만약, HTML 파일에 20개의 변화가 생기면 과정 역시 20회가 이루어 집니다.
하지만 virtual DOM은 변화된 부분만 가려내어 실제 DOM에 전달하기에 1회로 인식하여 단 한번만 렌더링 과정만 거치면 됩니다.

 

📙 웹 성능향상을 위해 최적화를 해 본 경험이 있나요? 혹은 useMemo와 useCallback 메소드를 활용해 최적화 하는 원리에 대해서 설명하세요.

useMemo와 useCallback은 성능 최적화를 위해서 사용되는 Hook 입니다.
이때 , useMemo는 특정 결과 값을 재사용하는 반면
useCallback은 특정 함수를 새로 만들지 않고 재사용 하고 싶을 때 사용 합니다.
이 둘은 dependency 리스트를 이용하여 그 중 하나가 변경이 되면 결과에 변경됩니다.

 

📙 useCallback의 동작원리

useCallback은 변수가 선언되어 지면 해당 함수가 실행되어진다. 그 후에 deps의 변경을 통해
값이 변경이 되면 새로운 함수를 retrun하고, 값이 변경되지 않는다면 기존 함수를 return 한다.

 

📙 React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해서 설명하세요

React는 상태를 불변성을 띄게 변경합니다. 그로 인해 상태 객체의 주소값이 변경이 되면 변화가 되었다는 것을 알 수 있습니다.

 

📙 useEffect 메소드로 componentWillUnmount가 동작할 수 있는 방법에 대해 설명하세요.

 

useEffect 코드 부내부에서 return 하는 익명함수를 작성하는 방법으로 componenetWillUnmount를 구현할 수 있습니다.

 

📙 key는 어떻게 사용이 되나요?

리액트에서 collection을 렌더링할때 요소와 데이터 사이의 관계를 추적하기 쉽도록 반복되는 각 요소에 key를 추가하는 것이 중요 합니다. 키는 고유한 ID(이상적으로는 uuid 또는 기타의 고유 문자열)을 사용해야 하지만, 마지막 수단으로는 array의 인덱스가 있습니다.
key를 사용하지 않으면  collection 에 아이템을 추가하거나 제거할 때 예상하지 못한 동작 결과가 발생할 수 있습니다.

 

📙  prop drilling은 무엇이고, 어떻게 피할 수 있나요?

 props drilling은 부모 컴포넌트에서 하위 컴포넌트로 데이터를 전달할때 발생하는 것으로, props를 전달하는 것 이외에는 props를 필요로 하지 않는 다른 컴포넌트를 통해 " drilling"이 됩니다.

컴포넌트를 리팩토링 하고, 컴포넌트를 더 작은 컴포넌트로 세분화 하지 않고, 상태를 가장 가까운 부모 컴포넌트와 공유함으로써 prop drilling을 회피할 수 있ㅆ습니다. 레벨상 멀리 떨어진 컴포넌트와 state를 공유할 때에는,
리액트의 Context Api 또는 Redux와 같은 state를 관리 라이브러리를 사용 할 수 있습니다.

📙  React Context는 무엇인가요?

리액트는 하나의 애플리케이션 안에서 다수개의 컴포넌트들이 상태를 공유할때 발생한느 문제를 대응하기 위해 Context Api를 제공합니다. Redux와 같은 별도의 상태 관리 라이브러리를 추가하는 것이 유일한 방법이 였는데
소규모의 앱에선느 Redux가 불필요한 복잡성을 유발한다고 느꼈습니다.

 

📙  Redux 는 무엇인가요?

Redux는 React를 위한 Third-Party 상태관리 라이브러리로 Context APi가 개발되기 이전부터 존재하였습니다.
Redux 에는 store라고 불리는 상태 컨테이너의 개념을 기반으로 하는데 store 컴포넌트는 데이터를 props로 받을 수 있습니다. store을 업데이트 하면 reducer을 통해 전달되는 sotre에 action로 보내는 것 입니다. reducer은 action과 현재 상태를 받고 새로운 상태를 리턴하고 구독된 컴포넌트를 다시 렌더링 하게 합니다.

📙  React hooks 는 무엇이도 장점은 무엇인가요?

hooks는 클래스 기반 컴포넌트의 장점 을 함수형 컴포넌트로 가져오려는 리액트의 시도 입니다.

1. 클래스 기반 컴포넌트, 라이크사이클 훅, this 의 필요성이 사라집니다.
2. 공통 기능을 커스텀 hook으로 만들어서 로직을 재사용 하기 쉬워집니다.
3. 컴포넌트 자체에서 로직을 분리할 수 있어서 읽기 쉽고 테스트 하기 쉬운코드로 작성이 가능합니다.