Hello.js

import { Button, Navbar, Nav, Form, FormControl } from 'react-bootstrap';
import React from 'react'

const userName = "정연우";


function Hello(props) {
    console.log(props)
    return (
        <>
            <Navbar bg="dark" variant="dark">
                <Navbar.Brand href="/homepage">YDK Messenger</Navbar.Brand>
                <div className='ml-1 mr-2' style={{ color: 'white' }}>{userName} 님 환영합니다</div>
                <Nav className="mr-auto">
                    <Nav.Link href="/homepage">Home</Nav.Link>
                    <Nav.Link href="/profilepage">Profile</Nav.Link>
                    <Nav.Link href="/hello">Hello</Nav.Link>
                </Nav>
                {/* <Form inline>
                    <FormControl type="text" placeholder="Search" className="mr-sm-2" />
                    <Button variant="outline-info">Search</Button>
                </Form> */}
                <Button variant="light" className="ml-3">Logout</Button>
            </Navbar>


            <h1>hello</h1>
            <div>
                안녕하세요.{props.name}
            </div>
            <input className="input" />

        </>
    )

}

export default Hello;