'react 데이터'에 해당되는 글 1건

# 프로젝트 코드

github.com/HelloPlutoKid/javascriptCodeTest/tree/master/12.react/0.react-pratice/4.props

# 프로젝트 폴더 구조

# props로 전달된 데이터 표현 

1. Hooks 방식으로 데이터 전달

  1.1. PropsParent.jsx

import React, { memo, useRef, useState, createRef } from 'react';
import PropsChild from '../component/PropsChild';

const PropsParent = () => {
    const [name, setName] = useState('props 전달');
    const [users, setUsers] = useState([
        { name: 'a', grade: '2' },
        { name: 'b', grade: '1' },
        { name: 'c', grade: '6' },
    ]);

    return (
        <>
            <div id='PropsParent'>
                <h4>PropsParent</h4>
                {/* 보낼이름={보낼 데이터} */}
                <PropsChild name={name} users={users}></PropsChild>
            </div>
        </>
    );
};
export default PropsParent;

  1.2. PropsChild.jsx

import React, { memo, useRef, useState, createRef } from 'react';

//  props로 전달받을 녀석 정의
const PropsChild = ({users , name}) =>{
    return(
        <>
            <div id='PropsChild'>
                <h4>PropsChild</h4>
                <div>{name}</div>
                {users.map((item, index) =>
                    <div key={index}>{index} {item.name} {item.grade}</div>
                )}
            </div>
        </>
    );
};

export default PropsChild;

2. class 방식으로 데이터 전달

  2.1. PropsParent.jsx

import React, { Component } from 'react';
import PropsChild from './PropsChild'

class PropsParent extends Component {
    state = {
        name: 'props 전달 name name',
        users: [
            { name: 'a', grade: '2' },
            { name: 'b', grade: '1' },
            { name: 'c', grade: '6' },
        ]
    };

    render() {
        const { name, users } = this.state;
        return (
            <>
                <div id='PropsParent'>
                    <h4>PropsParent</h4>
                    {/* 보낼이름={보낼 데이터} */}
                    <PropsChild name={name} users={users}></PropsChild>
                </div>
            </>
        );
    }
}

export default PropsParent;

2.2. PropsChild.jsx

import React, { Component } from 'react';

class PropsChild extends Component{
    render(){
        const {users , name} = this.props;
        return(
            <>
                <div id='PropsChild'>
                    <h4>PropsChild</h4>
                    {/* this.props로 받은 데이터 표현하기 */}
                    <div>{name}</div>
                    {/* this.props로 받은 데이터 출력하기 */}
                    {users.map((item, index) =>
                        <div key={index}>{index} {item.name} {item.grade}</div>
                    )}
                </div>
            </>
        );
    }
}

export default PropsChild;

3. client.jsx

// import 방법과 const 방법 . 
// const React = require('react');
import React from 'react';

// const ReactDom = require('react-dom');
import ReactDom from 'react-dom';

// const { hot } = require('react-hot-loader/root');
import { hot } from 'react-hot-loader/root';

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

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: 'props-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. index.html(style 내용 확인)

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>props 테스트 하기</title>
    <style>
        div{
            font-size: 30px;
            font-weight: bold;
        }

        #PropsParent{
            border: 1px solid red;
            padding : 10px;
        }

        #PropsChild{
            border: 1px solid blue;
            padding : 10px;
        }
    </style>
</head>
<body>
    <div id="root"></div>
    <script src="./dist/app.js"></script>
</body>
</html>