React입문 1주차(React Component)

React Component

Component

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

 

클래스형 컴포넌트

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

---

함수형 컴포넌트

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

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

// 훨씬 쉬운 표현을 해보면 아래와 같죠.
function App () {
	return <div>hello</div>
}

리액트 세계에서 말하는 컴포넌트(블럭)는 즉 함수이다. 컴포넌트를 만들어 보고자 한다면 html을 return 하는 함수를 만들면 된다.

---

기본 구조 살펴보기

// im 안쪽
import logo from './logo.svg';
import './App.css';

// App가 컴포넌트인 것이고, 이 컴포넌트는 대문자로 시작해야 함(app안됨)
// 새로 파일을 만드려면 js변수 처럼 className 이렇게 다음 문자는 대문자로 해줘야함
function App() {
  // Javascript를 쓸 수 있는 영역
  // 함수가 시작되는 부분 바로 밑
  // return문 위에
  return (
    // retur문 바로 밑은(return문 안에 쓰는 것) html 같이 생긴 부분을 작성하는 부분 
    // html같이 생겼지만 JSX문법 이라고 함
    // JSX : Javascritp와 XML(html이라고 생각)의 합성어
    // Javascript적인 요소를 쓰고 싶다면{ }안에 작성하면 됨
    <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>
  );
}

// ex(out) 바깥쪽
export default App;

---

JSX문법 안에서는 어떠한 tag에 스타일을 부여하기 위해서는 key-value로 되어있는 객체 js문법으로 넣어주면 된다. 

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

  return (
  /* <---- HTML/JSX 영역  ---->*/
    <div
      style={{
        height: '100vh',
        display: ' flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}
    >
   {/* 이곳에 퀴즈를 위한 html 코드를 작성해 주세요 */}
    </div>
  );
}

export default App;

> style속성 안에다가 js문법 객체를 넣어주었음

---

import React from 'react';
function App() {

  // <---- 자바스크립트 영역 ---->
  // function onClickButtonHandler() {
  //   alert('클릭!')
  // }
  const onClickButtonHandler = () => {
    alert('Click!')
  }

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

export default App;

---

<span>이것은 내가 만든 App 컴포넌트 입니다.</span>
<button onClick={onClickButtonHandler}>클릭!</button>

> html코드 넣어주고

 

// <---- 자바스크립트 영역 ---->
// 함수 사용
function onClickButtonHandler() {
   alert('클릭!')
 }
 
 // 화살표 함수사용
const onClickButtonHandler = () => {
  alert('Click!')
}

> js 요소 넣어주고

---

부모-자식 컴포넌트

컴포넌트 안에 컴포넌트 넣기

컴포넌트는 다른 컴포넌트를 품을 수 있다. 이때 다른 컴포넌트를 품는 컴포넌트를 부모 컴포넌트라고 부르고, 다른 컴포넌트 안에서 품어지는 컴포넌트를 자식 컴포넌트라고 부른다.

---

App라는 컴포넌트를 바깥으로 내보내는(export하는) App.js 파일인데

// src/App.js
import React from "react";

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

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

export default App;

> App 컴포넌트에서 Child컴포넌트를 마치 HTML 태그를 쓰듯이 넣었다. App컴포넌트가 부모 컴포넌트가 되고, Child 컴포넌트가 자식 컴포넌트가 된다. 이렇게 한 컴포넌트 안에 다른 컴포넌트를 넣을 수 있다.

import React from 'react';

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

export default App;

> 원래 이렇게 App 컴포넌트만 있었던 걸 부모 컴포넌트와 자식 컴포넌트로 쪼갠다

 

이렇게 함수로 만들어진 컴포넌트를 html 태그 사용하듯이 코드를 작성하는 이 방식을 JSX라고 부를 것이다.

 

return문의 최상단에는 태그가 하나만 존재해야하고 그 태그는 빈 태그여도 작동된다.

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

// 작동오류
function App() {
	return {
        <div>나는 자식입니다</div>
        <div>나는 자식입니다</div>
        <div>나는 자식입니다</div>
        <div>나는 자식입니다</div>
    }    
}

// return문 안에 여러줄 발생시 하나의 태그로 묶어주기
function App() {
	return {
        <div> // 혹은 <> 빈태그
            <div>나는 자식입니다</div>
            <div>나는 자식입니다</div>
            <div>나는 자식입니다</div>
            <div>나는 자식입니다</div>
        </div> // 혹은 </>
    }    
}

// 부모자식의 경우로 바꿔주면
// 자식 컴포넌트
function Child() {
	return <div>나는 자식입니다</div>
}

// 부모 컴포넌트
function App() {
	return {
        <div> // 혹은 <> 빈태그
            <Child/>
            <Child/>
            <Child/>
            <Child/>
        </div> // 혹은 </>
    }    
}

---

import React from 'react';

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

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

// 할아버지 대문자로 시작하는 낙타로 컴포넌트 명명
function GrandFather() {
  return <Mother />;
}

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

export default App;