컴포넌트와 JSX

---

1. 컴포넌트 개념

• 컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
• 개념적으로 컴포넌트는 Java Script 함수와 유사합니다.
• "props"(input) 라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지는 기술하는 React 엘리먼트를 반환(output) 합니다.

---

2. 컴포넌트를 표현하는 두 가지 방법

함수형 컴포넌트

/*
props라는 입력을 받음
화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
*/

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

function App() {
	return <div>hello</div>
}

클래스형 컴포넌트

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

두 가지 모두 기능상으로는 동일하지만, 함수형 컴포넌트를 권장합니다.

---

함수형 부모자식 컴포넌트

부모 컴포넌트

function App() {
	return <div>
    	안녕하세요
        <Child /> <<< 부모 컴포넌트에 자식 컴포넌트를 선언
    </div>
}

자식 컴포넌트

function Child() { 
	return <div>나는 자식입니다.</div>
}
export default App;

위의 코드처럼 개별의 조각으로 쪼개어 부모요소에 자식요소를 넣을 수 있습니다.

---

컴포넌트 예제

할아버지, 엄마, 자식 컴포넌트를 만든 후 서로 연결해 보자!

현재 App() 컴포넌트는 할아버지 컴포넌트를 갖고 있는 상태

function App() {
	return (
      <div>
      	<h1>부모-자식 관계 테스트</h1>
        <Grandfather />
      </div>
    )
}

할아버지 컴포넌트
현재 Grandfather() 컴포넌트 안에는 엄마 컴포넌트도 함께 포함 돼 있는 상태

function Grandfather() {
	return (
    	<div>
        	<p>나는 할아버지 입니다.</p>
            <Mother />
        </div>
    )
}

엄마 컴포넌트
현재 Mother() 컴포넌트 안에는 자식 컴포넌트도 함께 포함 돼 있는 상태

function Mother() {
	return (
    	<div>
        	<p>나는 엄마입니다.</p>
            <Child />
        </div>
    )
}

자식 컴포넌트

function Child() {
	return (
    	<div>
        	<p>나는 자식입니다.</p>
        </div>
    )
}