11/23[TIL]Module / Bundler / 비동기 / Virtual Dom / Hooks

Module

코드에서 특정 기능을 하는 부분을 떼어내서 함수로 만든 것으로 우리가 코드를 분리하는 이유는 재사용성 / 유지보수 / 범용적 사용에 장점을 가지기 때문이다.

 

하지만 이러한 모듈을 사용하는 것도 어느 부분이 다른 부분에 의존하게 되면 오류가 생기게 되고 

그렇기에 순서가 중요해지고 그 에 따른 스코프 관리 또한 중요해진다. 즉 코드가 복잡해 질 수록 점점 더 module을 관리(사용) 하기 어려워진다는 것이다.

 

앞서 이러한 점을 해결하기 위해 js의 범용적 사용을 위한 모듈 시스템 구축의 선두주자라고도 불리우는 common JS 가 해결책으로 나왔다. 모든 모듈은 자신만의 독립적인 실행 영역(스코프)이 있어야 한다. 그리고 모듈 정의는 전역객체인 export 객체 사용하며 모듈의 사용은 require 함수 이용한다.

 

ES6 부터는 내장된 모듈 시스템을 사용으로 좀 더 진화한 해결책이 나왔다. 이 것이 우리가 지금 자주 사용하는 import / export의 개념이다.

하지만 Import/export를 버전이나 다른 이유로 사용할 수 없는 경우가 생기기에 도입된 것이 아래에서 말할 Bundler의 개념이다.

 

Bundler

필요한 파일들을 묶어서 하나의 파일로 만들어서 html에서 <script> 태그로 로딩 될 수 있도록 만들어준다.

이는 기존에는 모듈화를 할수록 전송해야 할 파일들이 늘어나게 되는데 bundler를 사용하게 되면 요청/응답에서 발생하게 되는 시간이 절약되는 이 점을 준다.

 

 

 

비동기

js에서 외부 데이터를 가져오는 것은 비동기로 이루어지게 되는데 이는 간단히 생각해보면 서버를 갔다 오는 동안 클라이언트가 멈춰 있을 수는 없기 때문이다. 즉, js는 싱글 스레드 이기 때문이다.

 

여기서 비동기란 일반적으로 js코드는 위에서 아래로 읽어나가지만 모두가 동기적으로 이루어지는 것은 아닌데 대부분의 메서드들은 비동기로 구현한다. setTimeout 처럼 말이다.

 

이렇게 비동기로 처리하는 방법에는 여러 가지가 존재하는데 우리는 다 다루었던 부분이다.

 

1. callback

2. promise (fetch .then .then)

3. async await

 

 

 

 

Virtual dom(실제 dom이 아닌 js 로직)

 

데이터의 추가나 업데이트 같이 변화가 일어나게 되면 실제 dom에 새로운 것을 적용하는 것이 아니라 js로 이루어진 virtual dom에 먼저 렌더링 하게 된다. 그 후 기존의 dom과 비교하여 정말 필요한 부분만 업데이트하는 방식으로 동작하게 되는 것이다.

 

그렇게 virtual dom은 dom의 동작을 최소한 시켜준다.

만약 사용하지 않는다면 기존에 html 파일을 받는 다면 browser가 dom tree를 생성 → style 적용 → render tree 생성 그 후 레이아웃을 거쳐 화면에 표시한다. 그런데 새로운 dom이 추가된다면 앞서 말한 순서를 다시 진행하여야 한다. 매번 새로운 render tree를 생성하게 되는 것이다.

싱글 페이지 애플리케이션에서는 그만큼 dom 조작이 많이 발생하게 되고 그만큼 브라우저가 많은 연산을 해야 한다는 것인데 virtual dom은 반드시 없어서는 안 될 부분이다.

변경된 부분을 virtual dom에 먼저 적용한 후 그 부분을 실제 dom과 비교하여 정말로 변경이 필요한 부분만 dom에 전달해주어 브라우저의 연산의 양을 줄여주면서 성능개선에 도움을 줄 수 있다.

 

 

Hooks

기존의 react에는 예전엔 function 컴포넌트에서 stateful 한 logic을 사용하는 것과 life cycle 함수를 사용하는 문제가 있는 등 이밖에도 많은 문제들이 존재했다.

그 문제들을 해결해줄 Hooks라는 것이 나왔는데

필요한 것(stateful logic)만 hook 하여 쓰자!라는 의미로 내가 필요한 logic 만 쓸 수 있다는 이점을 가지고 있다.

 

class 컴포넌트(wrapper hell..(class 안에 class...) 느려지고 가독성 또한 좋지 않음 ) 보단 function 컴포넌트를 사용하자!

기존의 class 컴포넌트는 시점을 리액트에서 강제했으나 function 컴포넌트는 보다 유연해졌다.

 

Class react

컴포넌트가 변할 때 / props가 변할 때 life cycle 함수를 실행한다.

이전 state, 이전 props와 현재 state, props를 비교하여 컴포넌트를 업데이트한다

그렇기에 가독성이 좋지 않다.

 

Function react (hooks)

data를 동기화한다. 이 점이 상당히 강력함을 가져다준다.

useEffect의 두 번째 인자에 의존하여 업데이트한다.

즉, state, props에 종속되지 않고 개발자가 원하는 변수 변화에 따른 함수 실행이 가능하며 짧고 간결하다.

그리고 무엇보다 실생활에 더욱 맞는 코드라고 볼 수 있다.

 

 

React Hooks의 종류

 

useState

useState는 현재 state 값과 state 업데이트할 수 있는 함수를 반환하며, 초기 State 값을 받는다.

const [state, setState] = useState(initialState);

하나의 useState 함수는 하나의 상태 값만 관리를 할 수 있기 때문에 컴포넌트에서 관리해야 할 상태가 여러 개라면 useState를 여러 번 사용하면 된다.

 

useEffect

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 하며 useEffect는 렌더링 된 이후 호출된다.

클래스형 컴포넌트의 lifecycle인 componentDidMount와 componentDidUpdate를 합친 형태로 보아도 무방하다.

 

useContext

함수형 컴포넌트에서 Context를 보다 더 쉽게 사용할 수 있다.

 

useRef

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

 

useMemo and useCallback

useMemo를 사용하면 함수형 컴포넌트 내부에서 발생하는 연산을 최적화할 수 있습니다

useCallback 은 useMemo와 상당히 비슷한 함수로 주로 렌더링 성능을 최적화해야 하는 상황에서 사용한다. useCallback을 사용하면 이벤트 핸들러 함수를 필요할 때만 생성할 수 있다.

 

useReducer

useReducer는 useState 보다 컴포넌트에서 더 다양한 상황에 따라 다양한 상태를 다른 값으로 업데이트해주고 싶을 때 사용하는 것이다.

 

앞서 언급한 것 말고도 만약에 여러 컴포넌트에서 비슷한 기능을 공유하게 되는 일이 발생한다면 이를 우리들만의 Hook을 작성하여 로직을 재사용할 수 있다. 즉 커스텀 hooks 또한 구현이 가능하다는 것이다.

 

앞서 언급한 hooks들의 사용법은 조금 더 시간을 두면서 배워 나가면서 추후에 블로깅 할 예정이다.