React Component

React Component

 

UI를 재사용이 가능한 개별적인 여러 조각으로 나눔

 

📌 함수형 컴포넌트

// 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>;
  }
}

 

 

📌 JSX 

자바스크립트의 확장 문법이며 XML과 비슷

 

📌 { }

자바스크립트 표현식을 JSX 내부에 작성하려면 {}로 감싸줌.

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

// im : 안쪽
// ex : 바깥쪽
// port : 항구

function App() {
  // 여기가 자바스크립트를 쓸 수 있는 영역입니다.

  return (
    // JSX(Javascript + XML - HTML)
    // 자바스크립트 문법 쓰고 싶을 때 : {}
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

 

---

📝 컴포넌트 만들기 실습1

import React from 'react';
function App() {
  
	// <---- 자바스크립트 영역 ---->
  // function onClickButtonHandler () {
  //   alert('클릭!');
  // }

  const onClickButtonHandler = () => {
    alert('클릭!');
  }

  /* <---- HTML/JSX 영역  ---->*/
  return (
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
    
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    <span>이것은 내가 만든 App 컴포넌트 입니다</span>
    <button onClick={onClickButtonHandler}>클릭!</button>
    </div>
  );
}

export default App;

컴포넌트 만들기

 

📌 부모자식 컴포넌트

반복되는 로직이 생길 경우 유용!

import React from 'react';

// 자식 컴포넌트
function Child() {
  return <div>나는 아들입니다.</div>;
}

// 부모 컴포넌트
function App() {
  return (
    <>
      <Child />
      <Child />
      <Child />
      <Child />
      <Child />
    </>
  );
}

export default App;

부모자식 컴포넌트

 

📝 컴포넌트 만들기 실습2

import React from 'react';

// 할아버지 컴포넌트
function Grandfather() {
  return <Mother />;
}

// 엄마 컴포넌트
function Mother() {
  return <Child />;
}

// 자식 컴포넌트
function Child() {
  return <div>연결 성공 !</div>;
}

// 부모 컴포넌트
function App() {
  return (
    <>
      <Grandfather />
    </>
  );
}

export default App;

부모자식 컴포넌트2