React Component

React Component?

---

1. 재사용 UI 함수

여러개의 컴포넌트를 만들어 놓고 UI에 필요할 때 마다 꺼내쓴다.
만들어 놓고 꺼내쓰는 Javascript의 함수와 유사하다.

2. 컴포넌트 형태

• 부모 요소에서 내려온 객체 props라는 입력을 받음
• 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
• 함수형 컴포넌트 사용 지향!
• props는 추후 더 자세하게

2.1. 함수형 컴포넌트

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

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

2.2. 클래스형 컴포넌트

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

3. 컴포넌트 구조

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={/* <---- style 지정  ---->*/
        {
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }
      }
    >
    </div>
  );
}

export default App;

3.1. import

(im : 안쪽 port : 항구) 외부 파일을 안쪽으로 받아오는 영역

3.2. Component 시작

함수와 문법 유사하며 컴포넌트 이름 시작은 꼭 대문자

3.3. Javascript 영역

컴포넌트 시작 ~ return

3.4 JSX 문법(JS + HTML 유사)

• return 영역부터 시작된다.
• 멀티라인일 경우 ()로 감싸주기 싱글라인은 생략가능
• 최초의 Tag로 감싸줘야함 빈 테그<> 적용 가능
• 함수를 사용할 때는 중괄호{} 감싸주기
• style 적용은 기본적으로 Object 형태로 구성되어 함수{} 객체{} => 함수{ 객체{} }

3.5 export

(ex : 바깥쪽 port : 항구) 내부 파일을 바깥으로 내보내는 영역

4. 부모자식 컴포넌트

컴포넌트는 다른 컴포넌트를 품을 수 있으며
품고있는 상위 컴포넌트를 부모, 품어지는 하위 컴포넌트를 자식이라 말한다.

• 데이터는 부모 => 자식 단 방향으로 이루어진다.
• Component 데이터 보내기 < 컴포넌트 명칭 />
• 데이터의 흐름 파악 중요(GrandFather => Child)

import React from "react";

function Child() {
  return <div>연결 성공</div>;
}

function Mother() {
  return <Child />;
}

function GrandFather() {
  return <Mother />;
}

function App() {
  return <GrandFather />;
}

export default App;