[React] 컴포넌트

컴포넌트 = 리액트의 꽃 

이유는? 리액트로 작성된 화면은 컴포넌트만으로 구성

데이터가 주어졌을때 이에 맞춰 UI를 만들어주고 변화가 일어날 때 주어진 작업 처리를 한다.

또한 임의 메서드를 만들어 특별한 기능을 붙여줄 수도 있다.

 

컴포넌트 선언방식

1. 함수형 컴포넌트

: 메모리자원을 클래스형보다 덜 사용하며, 더 선언하기 편함

단점 - state와 라이프사이클 API사용이 불가했었으나, 지금은 Hooks라는 기능을 통해 사용가능

 

2. 클래스형 컴포넌트

: state기능 및 라이프사이클 기능을 사용할 수 있다는 것과, 임의 메서드를 정의할 수 있음

이때 클래스형 컴포넌트에서는 render함수가 꼭 있어야 하며, 그 안에서 보여줄 jsx를 반환한다.

import React, { Component } from 'react';
 
class App extends Component {
  render() {
    const name = 'react';
    return <div className="react">{name}</div>;
  }
}
 
export default App;

 

사용하기

scr디렉터리에 새파일 만들기

1. 함수형 

	
import React from 'react';
 
const MyComponent = () => {
    return <div>나의 새롭고 멋진 컴포넌트</div>;
};
 
export default MyComponent;

()=>{} 즉 화살표 함수 문법은 ES6에 도입된 것으로 주로 함수를 파라미터로 전달할 때 유용하다.

기존의 function 키워드 사용과 동일한 기능을 한다. 

 

app.js에서 불러와 사용

import React from 'react';
import MyComponent from './MyComponent';
 
const App = () => {
  return <MyComponent />;
};
 
export default App;

 

2. 클래스형

	
import React, { Component } from 'react';
 
class MyComponent extends Component {
    render() {
        return (
            <div>
                나의 새롭고 멋진 컴포넌트
            </div>
        );
    }
}
 
export default MyComponent;

 

 

컴포넌트 여러개 사용하기

MyComponent2

import React, { Component } from 'react';
 
class MyComponent2 extends Component {
    render() {
        return (
            <div>
                저는 MyComponent2 입니다!
            </div>
        );
    }
}
 
export default MyComponent2;

MyComponent3

 

import React, { Component } from 'react';
 
class MyComponent3 extends Component {
    render() {
        return (
            <div>
                저는 MyComponent3 입니다! 하하하!
            </div>
        );
    }
}
 
export default MyComponent3;

 

app.js

 
import './App.css';
import MyComponent from './MyComponent';
import MyComponent2 from './MyComponent2';
import MyComponent3 from './MyComponent3';
 
function App() {
  return (
    <div>
      <MyComponent />
      <MyComponent2 />
      <MyComponent3 />
    </div>
  );
}
 
export default App;

 

실습하기

컴포넌트 1. 

import React, { Component } from 'react';

export default class Test extends Component {
  render() {
    const name = '---';
    const my_style = {
      backgroundColor: 'blue',
      color: 'orange',
      fontSize: '40px',
      padding: '12px',
    };
    return <div style={my_style}>{name}</div>;
  }
}

컴포넌트2.

import React, { Component } from 'react';
import cat from '../cat2.jpeg';

export default class Test2 extends Component {
  render() {
    const style = { color: 'orange', fontSize: '40px', marginTop: '20px' };
    return (
      <div style={style}>
        <h2>"안녕하세요"</h2>
        <img src={cat} alt="cat" style={{ width: '400px' }}></img>
      </div>
    );
  }
}

 

app.js

import React, { Fragment } from 'react';
import './App.css';
import Test from './components/Test';
import Test2 from './components/Test2';

function App() {
  return (
    <Fragment>
      <Test />
      <Test2 />
    </Fragment>
  );
}

export default App;