망할고양이의 도피처

생성되어있는 App.js에 컴포넌트를 추가하여 화면을 그리는 간단한 작업을 수행하겠습니다. 

src 폴더 하위에 component 폴더를 생성합니다. 

새로 생성한 component하위에 3개의 compoent 를 생성할 계획입니다. 

• Greeting.js
• Money.js
• Welcome.js

Greeting.js 

export default function Greeting(){
    return <h2>Greeting!!!</h2>
}

Welcome.js

export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

참고. Component를 작성할때 작성 방법

//방법 1
export default function Welcome(){
    return <h2>Welcome !!</h2>   
}

//방법 2
const Welcome = function(){
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

//방법 3
const Welcome = () => {
    return <h2>Welcome !!</h2>   
}
export defailt Welcome;

이렇게 작성된 두개의 Component를 App.js에서 사용해 보겠습니다. 

App.js

import './App.css';
import Greeting from './component/Greeting';
import Welcome from './component/Welcome';
function App() {
  return (
    <div className="App">
      <Greeting />
      <Welcome/>
    </div>
  );
}

export default App;

이번에는 Welcome안에 Money를 넣어서 화면을 구성하도록 하겠습니다. 

Moneny.js 를 작성합니다. 

export default function Money(){
    return <h3>Money</h3>
}

Welcome.js를 아래와 같이 수정합니다.

import Money from './Money'

export default function Welcome(){
    return (
        <h2>Welcome !!</h2>   
        <Money/>
    )
}

그리고 저장을 하면 아래와 같이 오류가 발생합니다. 

JSX는 return할때 한개의 Object만 return할 수 있습니다. 

즉, Welcome의 <h2>와 <Money/> 안에 있는 <h3>가 리턴되어 2개의 Object가 리턴됨으로서 오류가 발생했습니다. 

Welcome.js의 코드를 아래와 같이 수정합니다. 

import Money from './Money'

export default function Welcome(){
    return (
        <abcd>
        <h2>Welcome !!</h2>   
        <Money/>
        </abcd>
    )
}

<abcd>를 추가하여 한개의 Object로 변경하여 retrurn되도록 수정하면 정상적으로 화면이 실행됩니다. 

Component는 리액트에서 개발할 모든 애플리케이션의  최소단위의 조각입니다. 

Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다. 

• 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
• 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
• 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

https://ko.reactjs.org/docs/components-and-props.html

<함수형 컴포넌트 예시>

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

<클래스형 컴포넌트 예시>

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}