'React'에 해당되는 글 3건

[react-beautiful-dnd] react, next.js 드래그 만들기 2

# 결과화면 

1.  index.js

 - DragLand Component 불러오기

import DragLand from "../components/DragComponent/DragLand"
// import Test from '../components/Test'

const Index = () => {
    return (
        <>
            <div>Hello next.js 10</div>
            <br/>
            {/* Drag Component */}
            <DragLand></DragLand>
        </>
    )
}

export default Index;

2.  DragLand.js

 -DragLand.js Component가 Load된 시점 Drag Components 불러오기

// React 관련 요소
import React, { useCallback, useEffect, useState, PureComponent } from 'react';
import Drag from './Drag';

const DragLand = () => {
    // window가 로드 된 시점에서 렌더링
    const [winReady, setwinReady] = useState(false);
    useEffect(() => {
        setwinReady(true);
    }, []);

    return (
        <>
            {/* 윈도우, DOM 로드 시점에서 드래그 생성 */}
            {winReady ? <Drag /> : null}
        </>
    );
};

export default DragLand;

3.  Drag.js

 -Drag 요소 만들기

// React 관련 요소
import React, { useCallback, useEffect, useState, PureComponent } from 'react';
// 드래그 요소
import { DragDropContext, Draggable, Droppable } from 'react-beautiful-dnd';
// 스타일 정의 
import styled from 'styled-components';
import '@atlaskit/css-reset';

const DragContent = styled.div`
  border: 1px solid lightgrey;
`;

const Content = styled.div`
  margin: 8px;
  padding : 10px;
  border: 1px solid lightgrey;
  border-radius: 2px;
`;

// 드래그 요소 생성 
const Drag = () => {
    const [datas, setDatas] = useState([
        { key: 'item-1', content: 'item-1' },
        { key: 'item-2', content: 'item-2' },
        { key: 'item-3', content: 'item-3' },
        { key: 'item-4', content: 'item-4' },
    ]);

    const onDragEnd = (result, provided) => {

        if (!result) {
            console.log('result가 null인 경우');
            return;
        }

        // 드래그 결과
        // source : 원본 
        // destination : 변경 
        const { destination, source } = result;

        // 동일한 위치에서 놓은 경우 
        if (destination.index === source.index) {
            console.log('초기 위치 index 동일한 경우');
            return;
        }

        // 데이터 변경
        setDatas((prev) => {
            // 원본 데이터 
            const sourceData = datas[source.index];
            // datas 복사
            let newDatas = prev;
            // 기존 데이터 제거 
            newDatas.splice(source.index, 1);
            // 이동 위치로 데이터 옮기기
            newDatas.splice(destination.index, 0, sourceData);

            return newDatas;
        });

    };

    return (
        <>
            {/* 드래그 영역 */}
            <DragDropContext
                onDragEnd={onDragEnd}
            >
                {/* 드래그 놓을 수 있는 영역 */}
                <Droppable droppableId="DropLand">
                    {/* 드래그 Div 생성 */}
                    {(provided, snapshot) => (
                        // CCS가 적용된 Div
                        <DragContent
                            {...provided.droppableProps}
                            ref={provided.innerRef}
                        >
                            <p>Drag Div!</p>
                            {datas.map((data, index) => (
                                <Draggable key={data.key} draggableId={data.key} index={index}>
                                    {(provided, snapshot) => (
                                        <Content
                                            ref={provided.innerRef}
                                            {...provided.draggableProps}
                                            {...provided.dragHandleProps}
                                        >
                                            {data.content}
                                        </Content>
                                    )}
                                </Draggable>
                            ))}
                            {provided.placeholder}
                        </DragContent>
                    )}
                </Droppable>
            </DragDropContext>
        </>
    )
}

export default Drag;

# 폴더 구조

class 방식으로 버튼 사용하기 

1. class 방식에 버튼 이벤트

// class 방식일 경우 
import React, { Component, PureComponent } from 'react';
// import React, {memo, useRef, useState} from 'react';


class btnTest extends Component {
    state = {
        text: 'state에서 text 알아보기',
        num: 0,
        inputVal : 'state input Val'
    };
    
    // input 사용할 때, 사용될 부분 
    input;
    onInputValChange = (e) => this.setState({ inputVal: e.target.value });
    onRefInput = (c) => {this.input = c;}
    // input 사용할 때, 사용될 부분 

     onNumBtn = (sign) => (e) => {
        if (sign === '+') {
            // setState에서는 값을 직접적으로 참조가 불가능함으로 함수로 리턴 형식으로 함.
            this.setState((pre) => {
                console.log(pre);
                return {
                    text: '증감',
                    num: pre.num + 1
                }
            });
        } else {
            this.setState((pre) => {
                console.log(pre);
                return {
                    text: '감소',
                    num: pre.num - 1
                }
            });
        }
    };

    render() {
        const { text, num ,inputVal } = this.state;
        return (
            <>
                <h2 id='test'>{text}</h2>
                <h2 id='num'>{num}</h2>
                <div>
                    <button onClick={this.onNumBtn('+')}>+</button>
                    <button onClick={this.onNumBtn('-')}>-</button>
                </div>
                <input type='text' value={inputVal} onChange={this.onInputValChange} ref={this.onRefInput}></input>
                <h1>{inputVal}</h1>
            </>
        );
    };
}
export default btnTest;

2. Hooks 방식에 버튼 이벤트

// class 방식일 경우 
// import React, { Component, PureComponent } from 'react';
import React, { memo, useEffect, useRef, useState } from 'react';

const btnTest = memo(() => {
    const [text, setText] = useState('Hooks Text Display');
    const [num, setNum] = useState(0);
    const [inputVal, setInputVal] = useState('input text');
    const input = useRef();

	const onNumBtn = (sign) => (e) => {
        if (sign === '+') {
            setText('증감');
            setNum((pre) => {
                return pre + 1;
            });
        } else {
            setText('감소');
            setNum((pre) => {
                return pre - 1;
            });
        }
    };

    const onInputValChange = (e) => {
        setInputVal(e.target.value);
    };

    return (
        <>
            <h2 id='test'>{text}</h2>
            <h2 id='num'>{num}</h2>
            <div>
                <button onClick={onNumBtn('+')}>+</button>
                <button onClick={onNumBtn('-')}>-</button>
            </div>
            <input type='text' value={inputVal} onChange={onInputValChange} ref={input}></input>
            <h1>{inputVal}</h1>
        </>
    );
});

export default btnTest;

3. client.jsx

import React from 'react';

// # https://ko.reactjs.org/docs/react-dom.html
// react-dom package는 앱의 최상위 레벨에서 사용할 수 있는 DOM에 특화된 메서드와 필요한 경우 React 모델 외부로 나갈 수 있는 해결책을 제공
// render(), hydrate(), unmountComponentAtNode(), findDOMNode(), createPortal()
// const ReactDom = require('react-dom');
import ReactDom from 'react-dom';

// # https://gist.github.com/velopert/21896de87566628b38b7ecb95973a7b3
// 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리
// const { hot } = require('react-hot-loader/root');
import { hot } from 'react-hot-loader/root';

// 불러올 컴포넌트의 이름
import btnTest from './component/btnTest';
const Hot = hot(btnTest);

ReactDom.render(<Hot />, document.querySelector('#root'));

4. webpack.config.js

const path = require('path');
const webpack = require('webpack');
// process.env.NODE_ENV = 'production';

module.exports = {
    // 프로젝트 이름 , 카멜 케이스는 안됨, 두 단어 이상을 사용한 프로젝트 이름 
    name: 'button-test', 
    mode: 'development', // 실서비스 : productuon
    // mode: 'productuon', // 실서비스 : productuon
    devtool: 'eval', // 빠르게
    resolve: {
        // 파일 형식 
        extensions: ['.js', '.jsx']
    },
    entry: {
        app: ['./client']
    }, // 입력
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 5% in KR']
                        },
                        debug: true,
                    }],
                    '@babel/preset-react'],
                plugins: [
                    '@babel/plugin-syntax-class-properties',
                    "transform-class-properties",
                    'react-hot-loader/babel'
                ]
            }
        }]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ],
    output: {
        // webpack-dev-server에서 hot 로드 되기 위해서 위치 지정, 없을 경우 html에서 ./dist/app.js를 app.js로 변경해야함
        publicPath: '/dist/',
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력
    devServer: {
        // contentBase: path.join(__dirname, "dist"),
        inline: true,
        hot: true,
        port: 9000,
        hot:true
    },

}

5. 전체소스코드 

# github.com/HelloPlutoKid/javascriptCodeTest/tree/master/12.react/0.react-pratice/2.function

# react state에 관한 설명

ko.reactjs.org/docs/state-and-lifecycle.html

- react에서 state을 사용한 데이터 관리 

- 폴더 

1.  class 방식

// class 방식일 경우 
import React, { Component, PureComponent } from 'react';

class StateTest extends Component {
    state = {
        text: 'state에서 text 알아보기',
        num: 0
    };

    componentDidMount() {
        console.log('=============================componentDidMount');
    }

    // 리렌더링할 요소를 지정
    shouldComponentUpdate(nextProps, nextState, nextContext) {
        return true;
    }

    // 리렌더링의 경우
    componentDidUpdate(prevProps, prevState, snapshot) {
        console.log('=============================componentDidUpdate');
    }

    // 컴포넌트가 제거되기 전 , 비동기 요청 정리를 많이함
    componentWillUnmount() {
        console.log('=============================componentWillUnmount');
    }

    // 값에 변화주기 
    onNumBtn = (sign) => (e) => {
        if (sign === '+') {
            // setState에서는 값을 직접적으로 참조가 불가능함으로 함수로 리턴 형식으로 함.
            this.setState((pre) => {
                console.log(pre);
                return {
                    text: '증감',
                    num: pre.num + 1
                }
            });
        } else {
            this.setState((pre) => {
                console.log(pre);
                return {
                    text: '감소',
                    num: pre.num - 1
                }
            });
        }
    };

    render() {
        // state 값 가져오기
        const { text, num } = this.state;
        return (
            <>
                <h2 id='test'>{text}</h2>
                <h2 id='num'>{num}</h2>
                <div>
                    <button onClick={this.onNumBtn('+')}>+</button>
                    <button onClick={this.onNumBtn('-')}>-</button>
                </div>

            </>
        );
    };
}
export default StateTest;

2.  Hooks 방식

// class 방식일 경우 
// import React, { Component, PureComponent } from 'react';
import React, { memo, useEffect, useRef, useState } from 'react';

const StateTest = memo(() => {
    const [text, setText] = useState('Hooks Text Display');
    const [num, setNum] = useState(0);
    const [inputVal, setInputVal] = useState('input text');
    const input = useRef();

    useEffect(() => {
        console.log('num = ', num);
        console.log('text = ', text);
        input.current.focus();
    }, [text, num, input]);

    const onNumBtn = (sign) => (e) => {
        if (sign === '+') {
            setText('증감');
            setNum((pre) => {
                return pre + 1;
            });
        } else {
            setText('감소');
            setNum((pre) => {
                return pre - 1;
            });
        }
    };

    const onInputValChange = (e) => {
        setInputVal(e.target.value);
    };

    return (
        <>
            <h2 id='test'>{text}</h2>
            <h2 id='num'>{num}</h2>
            <div>
                <button onClick={onNumBtn('+')}>+</button>
                <button onClick={onNumBtn('-')}>-</button>
            </div>
            <input type='text' value={inputVal} onChange={onInputValChange} ref={input}></input>
            <h1>{inputVal}</h1>
        </>
    );
});

export default StateTest;

3. index.jsx

// import 방법과 const 방법 . 
// 한방향으로 지정해서 프로젝트 이끌어가여함 안그러면 충돌남.
// const React = require('react');
import React from 'react';

// # https://ko.reactjs.org/docs/react-dom.html
// react-dom package는 앱의 최상위 레벨에서 사용할 수 있는 DOM에 특화된 메서드와 필요한 경우 React 모델 외부로 나갈 수 있는 해결책을 제공
// render(), hydrate(), unmountComponentAtNode(), findDOMNode(), createPortal()
// const ReactDom = require('react-dom');
import ReactDom from 'react-dom';

// # https://gist.github.com/velopert/21896de87566628b38b7ecb95973a7b3
// 코드가 변경되었을 때 페이지를 새로고침하지 않고 바뀐 부분만 빠르게 교체해주는 라이브러리
// const { hot } = require('react-hot-loader/root');
import { hot } from 'react-hot-loader/root';

// 불러올 컴포넌트의 이름
// import ResponseCheck from "./ResponseCheck";
// import RSP from "./RSP";
import StateTest from './component/StateTest';
const Hot = hot(StateTest);

ReactDom.render(<Hot />, document.querySelector('#root'));

4. webpack.config.js

const path = require('path');
const webpack = require('webpack');
// process.env.NODE_ENV = 'production';

module.exports = {
    // 프로젝트 이름 , 카멜 케이스는 안됨, 두 단어 이상을 사용한 프로젝트 이름 
    name: 'state-test', 
    mode: 'development', // 실서비스 : productuon
    // mode: 'productuon', // 실서비스 : productuon
    devtool: 'eval', // 빠르게
    resolve: {
        // 파일 형식 
        extensions: ['.js', '.jsx']
    },
    entry: {
        app: ['./index']
    }, // 입력
    module: {
        rules: [{
            test: /\.jsx?/,
            loader: 'babel-loader',
            options: {
                presets: [
                    ['@babel/preset-env', {
                        targets: {
                            browsers: ['> 5% in KR']
                        },
                        debug: true,
                    }],
                    '@babel/preset-react'],
                plugins: [
                    '@babel/plugin-syntax-class-properties',
                    "transform-class-properties",
                    'react-hot-loader/babel'
                ]
            }
        }]
    },
    plugins: [
        new webpack.LoaderOptionsPlugin({ debug: true }),
    ],
    output: {
        // webpack-dev-server에서 hot 로드 되기 위해서 위치 지정, 없을 경우 html에서 ./dist/app.js를 app.js로 변경해야함
        publicPath: '/dist/',
        path: path.join(__dirname, 'dist'),
        filename: 'app.js'
    }, // 출력
    devServer: {
        // contentBase: path.join(__dirname, "dist"),
        inline: true,
        hot: true,
        port: 9000,
        hot:true
    },

}

5. package.json

{
  "name": "number-baseball",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "react": "^16.14.0",
    "react-dom": "^16.14.0"
  },
  "devDependencies": {
    "@babel/plugin-syntax-class-properties": "^7.12.1",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "@babel/core": "^7.11.6",
    "@babel/preset-env": "^7.11.5",
    "@babel/preset-react": "^7.10.4",
    "babel-loader": "^8.1.0",
    "react-hot-loader": "^4.12.21",
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0"
  }
}