[Review] 리액트 모던 웹 개발

웹 팩(web pack) & 번들 파일

프론트엔드 프레임워크에서 사용하는 대표적인 모듈 번들러

웹 어플리케이션은 js 코드뿐만 아니라 다양한 이미지 파일, css 파일, html 파일로 구성되는데, 웹팩에서는 이처럼 어플리케이션이 동작하는데 필요한 파일을 모듈이라고 한다. 

웹팩은 다양한 입력 모듈을 결합해 훨씬 단순한 형태의 모듈로 변환해주는 역할을 한다. 

이 때 웹팩의 결과물을 번들이라고 한다. 

즉, 번들은 웹팩을 사용해 입력 모듈을 결합해 훨씬 단순화된 산출물을 의미한다.

 

번들파일, 빌드모드 - npm build, 개발 모드 - npm start 의 차이 

 

리액트 훅이란?

useState, useEffect 등 use 라는 접두사가 들어간 일련의 함수. 

리액트 훅 함수는 반드시 함수 컴포넌트에서만 사용해야한다. 

 

매개변수가 2개인 훅 함수는 다음과 같은 코드 패턴을 사용한다. 

use___<data type>(callback func, dependency list)

여기서 의존성 목록은, 콜백 함수에서 사용되는 변수나 함수의 값이 일정하지 않고 수시로 변할 수 있을 때, 해당 변수나 함수를 아이템으로 갖는 배열을 의미한다. 

의존성 목록에 있는 아이템 중 하나라도 변화가 있으면 콜백 함수를 새로 고침해 변한 값을 콜백 함수에 반영해준다. 

다만 의존성 목록이 비어있으면 한번만 실행되는데, 대표적으로 useEffect가 있다.