[React] React 컴포넌트

1. React 컴포넌트(Components)

 - 컴포넌트 HTML Element를 반환하는 함수와 같다.

 - 독립적이고 재사용한 코드이다.

 - JavaScript 함수와 동일한 목적을 제공하지만 독립된 상태로 작동하고,

   render()함수를 통해 HTML을 반환한다.

 

2. 클래스 컴포넌트 요소 만들기

 - React 컴포넌트를 생성할 때 컴포넌트 이름은 대문자로 시작해야 한다.

 - 컴포넌트는 extends React.Component문을 포함하야하며, 이 것은 React.Component에 대한 상속을 생성하고,

   컴포넌트에 React.Component의 함수에 대한 액세스 권한을 부여한다.

 - 컴포넌트에도 render() 함수가 필요하며 이 함수는 HTML을 반환한다.

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

class Car extends React.Component {
    render() {
        return <h2>Hi, I am a Car!</h2>
    }
}

ReactDOM.render(<Car/>, document.getElementById('root'));

<실행 결과>

 

3. 함수 컴포넌트 요소 만들기

 - 위와 비슷한 예제이지만 함수 컴포넌트를 만든다.

 - 함수 컴포넌트도 HTML을 반환하고 클래스 컴포넌트와 거의 동일한 방식으로 작동하지만,

   클래스 컴포넌트에는 몇 가지 추가 사항이 있다.

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

function Car()
{
    return <h2>Hi, I am also a Car !</h2>
}

ReactDOM.render(<Car />, document.getElementById('root'));

 

4. 컴포넌트 생성자(Component Constructor)

 - 생성자(constructor()) 가 있는 경우, 컴포넌트가 초기화 될 때 호출된다.

 - React에서 컴포넌트의 속성은 state라고 불린다.

 - 생성자 함수 또한 super()를 통해 부모 구성 요소의 생성자 함수를 실행할 수 있다.

   또한, 부모 컴포넌트(React.Component)의 모든 함수에 액세스할 수 있다.

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

class Car extends React.Component
{
    constructor()
    {
        super(); // React.Componet에서 state 멤버 변수 사용
        this.state = {color: 'red'};
    }

    render()
    {
        return <h2>I am a {this.state.color} Car!</h2>;
    }
}

ReactDOM.render(<Car />, document.getElementById('root'));

 

5. Props

 - 컴포넌트의 속성을 처리하는 다른 방법은 props이다.

 - prop은 함수 인수와 같으며 속성으로 컴포넌트에 보낸다.

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

class Car extends React.Component
{
    render()
    {
        return <h2> I am a {this.props.color} Car !</h2>;
    }
}

ReactDOM.render(<Car color='red'/>, document.getElementById('root'));

 

6. 컴포넌트 내 컴포넌트

 - 컴포넌트에서 다른 컴포넌트의 내부를 참조할 수 있다.

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

class Car extends React.Component
{
    render()
    {
        return <h2>I am a Car !</h2>
    }
}

class Garage extends React.Component
{
    render()
    {
        return (
            <div>
                <h1>Who lives in my Garage?</h1>
                <Car/>
            </div>
        )
    }
}

ReactDOM.render(<Garage />, document.getElementById('root'));

 

7. 파일 내 컴포넌트

 - React는 재사용 코드에 관련된 것이므로 일부 컴포넌트를 별도의 파일에 작성하는 것이 효율적일 수 있다.

   그러기위해서는 .js 파일의 확장자를 가진 새 파일을 만들고 그 안에 코드를 작성한다.

 - export default는 변수, 함수, 오브젝트, 클래스 등을 내보낼 수 있는 명령어.

 - exprot default는 import시 이름을 마음대로 정할 수 있다. (imort 커스텀명 from '../')

   export [변수] 는 import시 해당 변수명을 그대로 사용해야한다. (import {변수명} from '../')

// Car.js
import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component
{
    render(){
        return <h2>Hi, I am a Car !</h2>
    }
}

export default Car;

//index.js
import React from 'react';
import ReactDOM from 'react-dom';
import Car from './Car.js';

ReactDOM.render(<Car />, document.getElementById('root'));