ninanung

<div id="app">test-component</div>
<script>
(function() {
    // vue init
    landing.createApp('#app', {
        test: 'test'
    });
}());
</script>

ninanung

<template>
    <div>
        Hello World!!!
    </div>
</template>

ninanung

{
  "name": "vue-in-the-php",
  "version": "1.0.0",
  "description": "pack of code for Medium story example code",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "vue": "cross-env NODE_ENV=development webpack --config webpack.config.landing --watch",
    "vue:build": "cross-env NODE_ENV=production webpack --config webpack.config.landing"
  },

ninanung

const VueLoaderPlugin = require('vue-loader/lib/plugin');
const path = require('path');

// 개발환경인지 아닌지 판단하여 맞으면 true를, 아니면 false를 저장한다
const isDevelopment = process.env.NODE_ENV !== 'production';

module.exports = {
    // 개발모드를 설정
    mode: process.env.NODE_ENV,
    // 빌드시 중심이 될 파일을 설정한다. 여기서는 Vue프로젝트의 root파일인 index.js파일을 설정했다.

ninanung

webpack.config.js 에서 resolve alias사용

resolve: {
  extensions: [ '.js', '.vue', '.json' ],
  alias: {
    '@': path.resolve( __dirname, '..' )
  }
}

이렇게 사용하면 @를 통해 쉽게 import 할 수 있다.

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다. 이 글은 Redux를 직접 사용해 보았거나 최소한 관련 지식이 있다는 전제하에 설명합니다. 만약 모른다면 관련 공부를 먼저 해주세요.

때늦은 React Hooks 시리즈 5탄 - useReducer/Custom Hooks

저번글에서 React Hooks를 이용한 router를 설명해 보겠다고 했으나 계획을 조금 변경했습니다. 아무래도 이 부분은 설명하고 넘어가야 어떻게 다른 Hooks들이 동작하는지를 설명할 수 있을 것 같았습니다. 우선은 미뤄뒀던 useReducer를 설명해보죠.

useReducer

Redux, Reducer에 대한 개념은 React의 다양한 컴포넌트들에서 통합적으로 state를 관리하기 위해 고안되었습니다. 이 말이 무엇이냐면, 어플리케이션 전체를 관통하는 상태관리가 필요했기 때문에 만들어 졌다는 말입니다. 컴포넌트들의 상하에 따라 값을 주고 받는 것에 한계가 있고, 어떻게 구현을 한다고 해도 관리가 복잡해지는 문제가 있었기 때문입니다. useReducer는 함수형 컴포넌트에서의 Redux를 어느정도 대신하는 역할을 합니다. 어차피 설명을 줄줄이 하는 것 보다는 직접 보는게 빠르기 때문에 코드를 우선 보도록 하죠.

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 4탄 - useCallback/useRef

useCallback

React에서 컴포넌트가 다시 렌더링 될 때에는 컴포넌트 안에 선언된 함수들을 새로 생성합니다. 결국 계속해서 렌더링 되면 함수도 계속해서 새로 생성된다는 얘기입니다. 딱 들어봐도 비효율의 냄새가 나지 않습니까? 이런 비효율적인 작태를 React팀이 그냥 보고 넘어갔을 리 없겠죠. 그래서 나온것이 useCallback입니다. 저번 글의 useMemo와 비슷하게 퍼포먼스와 효율성을 위한 개념으로 만들어 졌습니다. 해당 기능을 사용하기 전의 코드를 먼저 보겠습니다.

const UseCallbackExample = () => {
  const [string, setString] = useState('');

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 3탄 - useContext/useMemo

useContext

useContext를 알기 위해서는 먼저 React의 Context기능에 대해서 알아야 합니다. 해당 기능에 대한 설명은 공식 페이지에 자세하게, 심지어 한글로 적혀있으니 모르겠다 하시는 분들은 먼저 보시는걸 추천합니다. Context, 그것은 React에서 props를 넘기는 과정을 돕기위해 만들어 졌습니다. 저-기 밑에있는 컴포넌트를 위해 자식 컴포넌트마다 props를 넘기는 건 비효율적이니까요. 하지만 그렇게 만들어진 Context조차도 완벽하지는 않았습니다. 함수형 컴포넌트에서 하나의 Context를 위해서는 하나의 Wrapper가 필요한데, 이 말은 결국 많은 Context를 위해서는 많은 Wrapper가 필요해진다는 말입니다. 결국 복잡한 React 프로젝트를 Wrapper Hell로 만들어 버리기 충분한 수준입니다. 이러한 문제를 해결하기 위해서 useContext가 탄생했습니다.

useContext는 더이상 함수형 컴포넌트에서 Context를 사용하기 위해

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 2탄 - useEffect

useEffect

지난글에서 useState를 이미 살펴 보았습니다. 간단히 정리하자면 "함수형 컴포넌트에서도 state를 사용할 수 있다! 개꿀!" 이었죠? 하지만 사용만 한다고 다가 아닌것이 우리내 코딩 인생이고, 복잡한 로직을 위한 다양한 기능들을 살펴볼 필요가 당연히 있습니다. useEffect는 그러한 기능들 중 하나로 useState가 기존의 방식을 대체하는 것 처럼 해당 기능 역시 componentDidUpdate와 componentDidMount를 대신한다고 봐도 좋을 것 같습니다. 정확한 기능을 먼저 말해보자면, 리엑트 컴포넌트가 렌더링될때 자동으로 해당 함수를 호출하게 되는데, 지난글에서 설명한 Hook을 이를 통해 이해할 수 있을 것 같네요. 특정 동작이 발생하면 특정 행동을 자동으로 실행한다. 네, Hook입니다.

const UseEffectExample = () => {
 const [test, setTest] = useState('initial value');

ninanung

이 글의 코드는 저자의 Github에서 확인할 수 있습니다.

때늦은 React Hooks 시리즈 1탄 - 개요/useState

나온지가 언제인데 지금에서야 이걸...?

그건 제가 이제서야 이걸 알았기 때문입니다. 늦게라도 알았으니 시작해야죠 별수 있나요.

개요