📍 React Hook

React에서 기존에 사용하던 Class를 이용한 코드를 작성할 필요 없이,
state와 여러 React 기능을 사용할 수 있도록 만든 라이브러리이다.

필요성

• 함수 컴포넌트도 클래스 컴포넌트처럼 사용 가능
• 함수 컴포넌트를 모듈로 활용 가능
  
  

useState

useState는 가장 기본적인 Hook로, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해준다. 만약에 함수형 컴포넌트에서 상태를 관리해야 되는 일이 발생한다면 이 Hook을 사용하면 된다.

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook이다.

import React, { useState, useEffect } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

useContext

useContext는 함수형 컴포넌트에서 Context를 보다 더 쉽게 사용 할 수 있다. useContext를 호출한 컴포넌트는 context 값이 변경되면 항상 리렌더링 된다.

const themes = {
  light: {
    foreground: "#000000",
    background: "#eeeeee"
  },
  dark: {
    foreground: "#ffffff",
    background: "#222222"
  }
};

const ThemeContext = React.createContext(themes.light);

function App() {
  return (
    <ThemeContext.Provider value={themes.dark}>
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar(props) {
  return (
    <div>
      <ThemedButton />
    </div>
  );
}

function ThemedButton() {
  const theme = useContext(ThemeContext);
  return (
    <button style={{ background: theme.background, color: theme.foreground }}>
      I am styled by theme context!
    </button>
  );
}

useRef

useRef는 함수형 컴포넌트에서 ref를 쉽게 사용 할 수 있게 해준다. .current 프로퍼티로 전달된 인자(initialValue)로 초기화된 변경 가능한 ref 객체를 반환하며 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다.

function TextInputWithFocusButton() {
  const inputEl = useRef(null);
  const onButtonClick = () => {
    // `current` points to the mounted text input element
    inputEl.current.focus();
  };
  return (
    <>
      <input ref={inputEl} type="text" />
      <button onClick={onButtonClick}>Focus the input</button>
    </>
  );
}

추가 Hooks

공식문서를 참고하면 위의 Hook 내용 외의 다른 Hook 정보를 볼 수 있다. 또한 직접 Hook을 제작하거나 다른 사람이 만든 Hook을 가져다 사용할 수도 있다.

📍 Webpack

Webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 이다. 간단하게 표현하자면 여러 파일을 하나 이상의 파일로 합쳐주는 자바스크립트 번들러로, webpack.config.js에서 속성을 설정할 수 있다.

모듈 번들러
웹 애플리케이션을 구성하는 자원(HTML, CSS, Javscript, Images 등)을 모두 각각의 모듈로 보고 이를 조합해서 병합된 하나의 결과물을 만드는 도구를 의미한다.

핵심 요소

1. Entry
   Webpack이 내부의 Dependency Graph를 생성하기 위해 사용해야 하는 모듈이다. Webpack은 entry가 의존하는 다른 모듈과 라이브러리를 찾아낸다.
   기본값은 ./src/index.js이지만, webpack 설정에서 entry 속성을 설정하여 다른 entry를 지정할 수 있다.

module.exports = {
  entry: './path/to/my/entry/file.js',
};

2. Output
   Output 속성은 생성된 번들을 내보낼 위치와 이 파일의 이름을 지정하는 방법을 webpack에 알려주는 역할을 한다.
   기본 출력 파일의 경우에는 ./dist/main.js로, 생성된 기타 파일의 경우에는 ./dist 폴더로 설정된다.

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js',
  },
};

3. Loaders
   Webpack은 기본적으로 JavaScript와 JSON 파일만 이해하기에 이이를 사용하면 webpack이 다른 유형의 파일을 처리하거나, 그들을 유효한 모듈로 변환하여 애플리케이션에서 사용하거나 Dependency Graph에 추가한다.

   상위 수준에서 로더는 webpack 설정에 두 가지 속성을 가진다.

   1. 변환이 필요한 파일을 식별하는 test 속성
   2. 변환을 수행하는데 사용되는 로더를 가리키는 use 속성

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js',
  },
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
};

4. Plugins
   플러그인을 활용하여 번들을 최적화하거나 환경 변수 주입 등과 같은 광범위한 작업을 수행 할 수 있다.
   플러그인을 사용하려면 require()를 통해 플러그인을 요청하고 plugins 배열에 추가해야 한다. 대부분의 플러그인은 옵션을 통해 사용자가 지정할 수 있고, 다른 목적으로 플러그인을 여러 번 사용하도록 설정할 수 있으므로 new 연산자로 호출하여 플러그인의 인스턴스를 만들어야 한다.

const HtmlWebpackPlugin = require('html-webpack-plugin');
const webpack = require('webpack'); // 내장 plugin에 접근하는 데 사용

module.exports = {
  module: {
    rules: [{ test: /\.txt$/, use: 'raw-loader' }],
  },
  plugins: [new HtmlWebpackPlugin({ template: './src/index.html' })],
};

5. Mode
   mode를 development, production 또는 none으로 설정하면 webpack에 내장된 환경별 최적화를 활성화 할 수 있다.
   기본값은 production이다.

module.exports = {
  mode: 'production',
};

6. Browser Compatibility
   Webpack은 ES5가 호환되는 모든 브라우저를 지원한다(단, IE8 이하는 지원되지 않는다). 구형 브라우저를 지원하려면 이러한 표현식을 사용하기 전에 폴리필을 로드해야 한다.

module.exports = {
  entry: {
    'main': './src/index.js',
    'polyfills': './src/polyfills/index.js',
    'detect.polyfills': './src/polyfills/detect.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    filename: '[name].js'
  },
  // ...
}

🪄 마치면서

아직 webpack dev server를 핫로딩할 때와 npm start로 개발할 때의 차이점을 잘 모르겠다. 둘이 서로 연관이 되어있지 않아서 webpack을 사용하려면 핫로딩이 필수인지 더 알아봐야 할 것 같다.