4. 컴포넌트

in Library on React


App.js

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}
export default App;
  • App()함수가 정의하고있고, 함수가 html(jsx)를 반환하고있다
    • App컴포넌트를 정의한 것
    • App()함수가 반환한 jsx가 화면에 그려진다
  • 컴포넌트의 생성
    • 컴포넌트명.js 파일 생성
    • 파일이름은 대문자로 시작
    • 코드의 시작 : import React from ‘react’;
    • 반환값 입력 (JSX)
    • 코드의 끝 : export default Potato;

index.js

ReactDOM.render(
  <App />,
  document.getElementById('root')
);
  • 컴포넌트의 사용
    • <App />

App.js

import React from 'react';
import Potato from './SubComponent';
function App() {
  return (
    <div>
      <h1>Hello</h1>
      <SubComponent />
    </div>
  );
}
export default App;
  • 컴포넌트 내에서 다른 컴포넌트를 사용할 수도 있다

컴포넌트 내에서 다른 컴포넌트 만들기

import React from 'react';

function SubComponent(){
  return (
    <h1>sub</h1>
  )
}

function App() {
  return (
    <div>
      <h1>Hello</h1>
      <SubComponent />
    </div>
  );
}
export default App;
  • App컴포넌트 내에서 SubComponent 함수를 선언한 후, 반환값에서 해당 컴포넌트 사용

함수형 컴포넌트

import React from 'react';
function App() {
  return (
    <div>
      <h1>Hello</h1>
    </div>
  );
}
export default App;

클래스형 컴포넌트

import React, { Component } from 'react';

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

es6 이전 클래스 문법

function Man(name){
  this.name = name;
}

Man.prototype.hi = function(){
  console.log(this.name + ' : hi');
}

var man = new Man('홍길동');
man.hi(); // 홍길동 hi

es6 클래스 문법

class Man{
  constructor(name){
    this.name = name;
  }
  hi(){
    console.log(this.name + ' : hi');
  }
}

const man = new Man('홍길동');
man.hi(); // 홍길동 hi

차이

  • 함수형
    • 장점
      • 클래스형보다 선언하기 편하다
      • 메모리자원도 덜 사용한다
      • 빌드 후 배포할 때도 결과물의 파일 크기가 더 작다
    • 단점
      • state와 라이프사이클 API 사용 불가
      • v16.8 업데이트 후 Hooks 기능으로 해결
  • 클래스형
    • state 기능 및 라이프사이클 기능 사용가능
    • 내부에 render 함수가 꼭 있어야한다
      • 그 안에서 jsx 반환
  • 리액트 공식매뉴얼은 함수형 컴포넌트와 Hooks를 사용하도록 권장

es6 화살표 함수

//function
function(){}

//화살표함수
() => {}
  • 기존 function을 이용한 함수를 완전히 대체하지는 않는다
  • 사용용도가 조금 다르다
  • 주로 함수를 파라미터로 전달할 때 유용

this 값의 차이

//function
function Dog(){
  this.name = '흰둥이';
  return(
    name: '검둥이',
    color: function(){
      console.log(this.name)
    }
  )
}
const dog = new Dog();
dog.color(); //검둥이

//화살표
function Dog(){
  this.name = '흰둥이';
  return(
    name: '검둥이',
    color: () => {
      console.log(this.name)
    }
  )
}
const dog = new Dog();
dog.color(); //흰둥이
  • 일반함수는 자신이 종속된 객체를 this로 가리킨다
  • 화살표함수는 자신이 종속된 인스턴스를 가리킨다

장점

//function
function double(value){
  return value*2;
}

//화살표
const double = (value) => value*2;
  • 값을 연산하여 바로 반환해야할 때 사용하기 좋다
  • 따로 {}를 열지 않으면, 연산값을 그대로 반환