[React] 컴포넌트

컴포넌트

• 데이터가 주어졌을 때 이에 맞추어 UI를 만들어주고 변화가 일어날 때 주어진 작업들을 처리
• 임의 메서드를 만들어 특별한 기능을 붙여 줄 수도 있음

1. 터미널에서 리액트 개발 전용 서버 구동

<컴포넌트 선언방식>
1) 함수형 컴포넌트

• 선언하기가 훨씬 편하다.
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용
• state와 라이프 API의 사용이 불가능하지만, 리액트가 업데이트되면서 hooks라는 기능 도입되어 문제 해결됨
• 코드예시

import React from 'react';
 
function App() {
    const name = "리액트";
    return (
      <div>{name}</div>
      )
}
export default App;

export default App;
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;

2. 컴포넌트 만들기

컴포넌트 코드 선언하기

파일 목록 중 src 디렉토리에 새파일 생성
MyComponent.js라고 파일명 지정

▶︎ MyComponent.js 함수형 컴포넌트

import React from 'react';
 
const MyComponent = () => {
    return <div>함수형 컴포넌트</div>;
};
 
export default MyComponent;
// 

= () => {}
ES6에 도입된 화살표 문법.
주로 함수를 파라미터로 전달할 때 유용.
function키워드와 화살표 함수 문법의 큰 차이는 없지만, 화살표 함수를 사용하는 것이 좀 더 간결하기에 함수형 컴포넌트를 만들 때는 화살표 문법 사용

export default MyComponent;
다른 파일에서 이 파일을 import할 때 위에서 선언한 MyComponent클래스를 불러오도록 설정하는 코드

▶︎ MyComponent.js 클래스형 컴포넌트

import React, { Component } from 'react';
 
class MyComponent extends Component {
    render() {
        return (
            <div>
                나의 클래스형 컴포넌트
            </div>
        );
    }
}
 
export default MyComponent;

▶︎ App.js

import React from 'react';
import MyComponent from './MyComponent';
//MyComponent.js에 만든 컴포넌트 불러옴
 
const App = () => {
  return <MyComponent />;
};
 
export default App;