[개념 스터디] 3주차 (FE)

 

 

React의 Virtual Dom

 

우선 virtual dom 에서의 dom이란 document object model로 객체로 문서 구조를 표현하는 방법이다.

주로 xml, html 로 작성한다.

웹 브라우저는 dom을 활용해서 객체에 자바스크립트와 css를 적용한다. 

dom은 tree 형태로 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할수도 있다.

 

virtual dom

 

virtual dom을 사용하면 실제 dom 을 조작하지 않고, 가상 dom을 사용한다.

virtual dom은 실제 dom의 사본이라고 생각하면 된다. 

 

react에서 데이터 변경으로 화면을 업데이트 할때는 다음의 3가지 순서를 거친다.

 

1. 데이터를 업데이트하면 전체 화면을 virtual dom에 다시 그린다.

2. 이전 virtual dom 의 내용과 다시 그린 내용을 비교한다.

3. 비교후 바뀐 부분만 실제 dom에 적용한다.

 

 

Class Component vs Function Component

 

클래스 컴포넌트

 

ex. 예시

-React.Component 를 상속받아 render() 를 사용할 수 있다.

-render() 안에 보여줄 내용을 jsx로 반환한다.

-state기능 및 라이프사이클 기능을 사용할 수 있다.

 

 

함수 컴포넌트 

 

ex. 예시

 

-return 문으로 화면에 그릴 내용을 jsx로 반환한다.

-사용이 간단하다

-hook 도입 이후 state와 라이프사이클 기능 사용이 가능하다.

 

React Hook

 

리액트 훅은 v16.8에 도입된 기능이고 덕분에 클래스형 컴포넌트처럼 함수형 컴포넌트에서도

상태관리가 가능해졌다. 

 

hook 종류

useState : 가장 기본적인 hook 으로 함수형 컴포넌트에서 상태를 관리할 때 사용한다.

useEffect : 리액트 컴포넌트가 렌더링 될 때마다 특정한 작업을 수행하도록 설정한다.

useReducer : useSate보다 더 다양한 컴포넌트 상황에 따라 다양한 상태를 다른 값으로 업데이트

                 해주고 싶을 때 사용한다. 

useMemo : 함수형 컴포넌트에서 발생하는 연산을 최적화 할 수 있다.

useCallback : useMemo와 비슷한 함수이다. 주로 렌더링 성능을 최적화해야 하는 경우 사용한다

useRef : 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있도록 해준다.

 

 

React Router

 

리액트는 SPA(Single Page Application) 방식을 사용한다.

회원가입과 로그인 기능을 예로 들면, MPA 방식에서는 회원가입 페이지, 로그인 페이지를

따로 만들었다. 하지만 SPA 방식에서는 하나의 페이지 안에 둘다 가지고 있다.

하나의 html 페이지 안에 로그인, 회원가입에 대한 데이터 파일을 가지고 

사용자가 누르는 버튼에 따라 두개중 하나를 렌더링해서 보여주게 된다.

 

즉, 둘의 차이는 현재 페이지를 완전히 다시 로드해서 새로 구성하는것 과

필요한 데이터만 가져와서 재로드 없이 렌더링 하느냐 이다.

 

Router에서도 MPA 방식의 경우 다른 페이지로 이동하기 위해선 hyperlink 를 통해 이동이 가능한데

SPA 에서는 html 파일이 여러개가 아니기때문에 그런 방식으로의 이동이 불가능하다. 

 

React-Router는 페이지를 새로 불러오지 않는 상황에서 각각의 선택에 따라

선택된 데이터만 다시 렌더링 해주는 라이브러리 이다. 

 

Redux

 

리덕스는 가장 많이 사용하고있는 리액트 상태 관리 라이브러리이다. 

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜 더욱 효율적으로 관리할 수 있다. 

리덕스 라이브러리는 전역 상태를 관리할 때 굉장히 효율적이다. 

Context API를 통해서도 같은 작업을 할수 있지만 프로젝트의 규모가 클수록

리덕스를 사용하는 것이 체계적인 관리에 더 좋다. 

또 미들웨어라는 기능을 제공하여 비동기 작업을 훨씬 효율적으로 관리할 수 있게 해준다.