React 리액트 컴포넌트 사용방법

---

컴포넌트 기본형

---

함수형 컴포넌트

[1] 함수형 컴포넌트 기본형

function 함수이름() {}

- return 구문이 렌더링되는 부분
- 예제코드

import React from ‘react’;
import ‘./App.css’;

function App() {
  const order = “americano”;
  return <div>{order}</div>;
}

export default App;

[2] 함수형 컴포넌트 화살표형 (ES6 이후 버전)

const 함수이름 = () => {}

- function 키워드 대신 () => {} 를 사용
- 예제코드

const doubling = (num) => num * 2;

 

[3] 화살표형과 기본형의 차이점

- 컴포넌트 선언시 둘은 차이가 없으나, 가리키는 this 가 다름

- function 일반함수 내에서 this는 자신이 종속한 최하위 객체를 가리키며,

- 화살표 함수는 자신이 종속한 “인스턴스” 객체 덩어리를 가리킴
- 화살표 함수는 값을 연산하여 바로 반환해야할 때 사용하면 가독성을 높일 수 있음

---

클래스형 컴포넌트

[1] 클래스형 컴포넌트 기본형

- {Component}를 import해와야 한다.
- 기본형은 class 이름 extends Component {}
- render(){} 함수 구문이 추가되고 그 내부에 return 포함
- return 구문이 렌더링됨
- 예제코드

import React, {Component} from ‘react’;

class App extends Component {
  render(){
    const order = ‘americano’;
    return <div>{order}</div>
  }
}

export default App;

 

---

함수형 컴포넌트 VS 클래스형 컴포넌트

[1] 함수형 컴포넌트

장점
- 선언하기 용이함
- 메모리 자원 덜 사용
- 배포시 결과물의 파일 크기가 더 작음(아주 큰 차이는 없음)
단점
- state와 라이프사이클 API의 사용이 불가능 (Hooks를 도입하면 해결됨)
=> 리액트 공식 매뉴얼에서 함수형 컴포넌트와 Hooks를 사용하도록 권장함

[2] 모듈(컴포넌트) 사용

(챌린지) 새 js 파일을 만들어 컴포넌트를 작성하고, 그것을 App.js 파일에서 불러와 표출시켜보자

모듈 내보내기

- App.js와 동일한 위계로 NewComponent.js 파일 생성
- 컴포넌트 코드 쓰기
- 마지막에 export로 내보낼 컴포넌트 이름 꼭 써주기

import React from ‘react’;
const NewComp = () => {
  return <div>새 컴포넌트에요</div>
}

// export 구문이 꼭 들어갑니다 !!
export default NewComp;

모듈 불러오기

App.js 파일 상단에서 import 구문 추가

import NewComp from ‘./NewComponent’;

일단 불러오면 모듈이름을 <> 안에 넣어 다른 HTML태그들처럼 사용하면 된다

import React from ‘react’;
import NewComp from ‘./NewComponent’;

const App = () => {
  return <NewComp />;
};

export default App

끝