컴포넌트(component)

6. 컴포넌트(component)
1> 개념
- 웹 화면에서 보여지는 개별적인 블럭 의미. (JSP 의 top.jsp, menu.jsp, bottom.jsp 와 비슷하다.)
- 일반적으로 *.js 파일로 구현됨.
- *.js 당 *.css 형태로 구현됨.
  사용방법은 import './App.css' 형식을 사용함.
- 일반적으로  중첩된 형태로 구현됨.

2> 컴포넌트 종류 2가지
가. 함수형 컴포넌트
- 현재 거의 개발할때 사용빈도가 높다.
ex>
    // 함수선언식(이름이 있는 함수)
    function fun() {

    }

    // 함수표현식(익명함수)
    const fun = function(){};

    // arrow 표현식
    java: () -> {}
    js: const fun = () => {}

    관례적으로 상수(const) 를 많이쓰지만 val 또는 let 을 사용해도 됨.


나. 클래스 컴포넌트
- 현재는 잘사용하지 않음.
- skip함.


3> 함수형 컴포넌트
가. 함수명은 반드시 대문자로 지정해야 된다.
  이유는 일반태그가 아닌 React 컴포넌트임을 알려주기 위해서 대문자로 사용한다.

ex>
    function App() {}
    function Person() {}
    function Menu() {}

    컴포넌트 사용: <App />
                  <Person />
                  <Menu />

나. 반드시 return 해야 된다.
ex>
    function Person() {

        return(
            // JSX(Javascript Syntax eXtension) 코드 작성 --> 화면에 랜더링됨.
            // - Javascript 확장한 문법이다.  
            // - JSX는 리액트로 프로젝트를 개발할 때 사용되므로 공식적인 자바스크립트 문법은 아니다.  
            // - 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

        ); // return( ); 에서 () 를 없이 사용하고싶을때는 한줄코드로 만들면 동작하게된다.
    }

    // return <div className="App">Hello</div>; // 한줄로 만들게 되면 () 없이 사용가능하지만 가독성을 위해서 () 사용을 권장한다.

// App.js

import logo from './logo.svg';
import './App.css';

function Menu() {
  return (
    <div className="Menu">
      <h1>menu 화면입니다.</h1>
    </div>
  );
}

function Bottom() {
  return (
    <div className="Bottom">
      <h1>bottom 화면입니다.</h1>
    </div>
  );
}


function App() {
  return (
    <div className="App">
      <Menu />
      <hr></hr>
      App 컴포넌트입니다.
      <hr></hr>
      <Bottom />
    </div>
  );
}

export default App;

// App.css

.App {
  text-align: center;
}

.Menu {
  color: red;
}

.Bottom {
  font-size: 40px;
}

다. 외부에서 사용할려면 반드시 export 해야 된다.
https://prefer2.tistory.com/entry/javaScript-export%EC%99%80-export-default%EC%9D%98-%EC%B0%A8%EC%9D%B4%EC%A0%90 참고

    export

        export default와 다르게 한 파일 내에서 여러 번 사용해도 상관이 없다.

    export default

        하나의 모듈에는 대개 하나의 export default가 존재한다.(여기서 모듈이란 하나의 파일을 말한다.)
        export default로 모듈을 내보낸다면 export한 이름과 상관없이 원하는 이름으로 import가 가능하다.


        # App.js
        ...

        function App() {
            return (
                <div className="App">
                <Menu />
                <hr></hr> // 필수적으로 넣어줘야한다.
                App 컴포넌트입니다.
                <hr></hr>
                <Bottom />
                </div>
            );
        }

        export default App;

- export 사용하는 경우
ex>
    export { Menu, Bottom };
    import { Menu, Bottom } from './component/XXX.js';

- export default 사용하는 경우
ex>
    export default Menu;

    import Menu from './component/XXX.js'

 

# App.js

import logo from './logo.svg';
import './App.css';

import { Menu } from './component/Menu.js';
import { Bottom, Bottom2 } from './component/Bottom.js';

function App() {
  return (
    <div className="App">
      <Menu />
      <hr></hr>
      App 컴포넌트입니다.
      <hr></hr>
      <Bottom />
      <hr></hr>
      <Bottom2 />
    </div>
  );
}

export default App;

# App.css

.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #282c34;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

# components/Menu.js

import './Menu.css'

// 함수 선언식
export function Menu() { // export 방법1
    return (

        // <div class="Menu">
        //     <h2>Menu 컴포넌트입니다.</h2>
        // </div>

        <div className="Menu">
            <h2>Menu 컴포넌트입니다.</h2>
        </div>
    );
}

// export { Menu }; // export 방법2

# components/Menu.css

.Menu {
    color: red;
}

# components/Bottom.js

import './Bottom.css'

// export function Bottom() {
//     return (
//         <div className="Bottom">
//             <h2>Bottom 컴포넌트입니다.</h2>
//         </div>
//     );
// }

// 함수표현식
const Bottom = function () {
    return (
        <div className="Bottom">
            <h2>Bottom 컴포넌트입니다.</h2>
        </div>
    );
}

// arrow 함수
const Bottom2 = () => {
    return (
        <div className="Bottom">
            <h2>Bottom 컴포넌트입니다.</h2>
        </div>
    );
};

export { Bottom, Bottom2 };

# components/Bottom.css

.Bottom {
    font-size: 40px;
}