React 변수 선언

React 컴포넌트를 선언하는 방식에는 두 가지 있다. 바로 함수형 컴포넌트와 클래스형 컴포넌트이다. 오늘 포스팅에서는 각각의 방식으로 어떻게 변수를 선언하는지 간단히 살펴보겠다.

 

1. 함수형 컴포넌트

[App.js]

// import '' from '파일명';
import Comp from "./Comp";
import ClassComp from "./ClassComp";

function App() {
  return (
    // 바로 밑의 태그들을 반환함
    // 아래처럼 div와 같은 태글들로 묶어서 내보내야 함
    // 아무것도 안 쓰고 <>로 작성해도 상관 없음
    <div>
      <ClassComp/>      
      <Comp/>
    </div> 
  );
}
// App을 내보냄으로 index.js에서 받아서 쓸 수 있음
export default App;

 

[index.js]

import React from 'react';
import ReactDOM from 'react-dom';

// 상대경로 : 내가 위치한 곳 기준으로 어디 있는지를 나타냄
// 절대경로 : ex) c:\react\example
import App from './App';

// JSX
ReactDOM.render(
  // 사용자 정의형 태그
    <App />,
  document.getElementById('root')
);

 

[Comp.js]

// 함수형 컴포넌트
// 함수명은 파일명과 같지 않아도 됨
function FuncComp() {
    let msg = "This is Variable";

    return (
        <>
            {msg}
            <h1>This is Component!</h1>
        </>
    );
}

// 여러 개의 함수 선언 가능
// function FuncCompSecond() {
//     return <h1>This is Component!</h1>;
// }

// 함수명을 내보내야 함
export default FuncComp;

 

함수형 컴포넌트는 자바스크립트처럼 함수를 따로 지정한 다음 그 안에 let 혹은 const와 같은 키워드로 변수를 선언할 수 있다. 그 다음 return 안에 중괄호인 {}에 해당 변수명을 넣음으로 해당 변수를 사용할 수 있다.

 

2. 클래스형 컴포넌트

import { Component } from "react";

export default class ClassComp extends Component{
    msg = "This is Class Member";

    render() {
        return (
            <>
                {this.msg}
                <h2>This is Class Component</h2>
            </>
        );
    }
}

 

다음은 클래스형 컴포넌트이다. 자바에서 클래스를 선언하는 것처럼 해 주면 된다. Component를 상속받아야 하며 render() 메소드가 반드시 있어야 한다. 그리고 함수형 컴포넌트와는 달리 let과 같은 키워드를 사용하지 않는다. 중괄호 안에 this 라는 키워드 역시 추가해 줘야 사용 가능하다.