[React] Component

컴포넌트

위키피디아에 기재되어 있는 Component 기반 개발은 다음과 같다.

기존의 시스템이나 소프트웨어를 구성하는 컴포넌트를 조립해서 하나의 새로운 응용 프로그램을 만드는 소프트웨어 개발 방법론

 

기업들은 쇼핑 바구니, 사용자 인증, 검색엔진, 카탈로그 등 상업적으로 이용 가능한 컴포넌트를 결합하여 그들의 전자상거래 응용 프로그램을 개발하는 컴포넌트 기반 개발을 사용한다.

컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있다.

개념적으로 컴포넌트는 Javascript 함수와 유사하다. 

props라고 하는 임의의 데이터를 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다.

props는 상위 컴포넌트에서 하위 컴포넌트로 내려주는 단방향 데이터(객체)를 말한다.

함수 컴포넌트 & 클래스 컴포넌트

React의 관점에서 볼 때 두 가지 유형 모두 동일하다.

 

Javascript 함수 작성

function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

위의 함수는 데이터를 가진 하나의 props 객체를 인자로 받은 후, React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다.

이러한 컴포넌트는 Javascript 함수이기 때문에 말 그대로 함수 컴포넌트라고 호칭한다.

 

ES6 class 사용

class Welcome extends React.Component{
    constructor(props){
    	super(props)
        this.state = {done: false}
    }
    
    // state 엡데이트를 원할 경우, setState() 를 사용해야 함
    this.setState({done: true})
    
    render(){
    	return <h1>Hello, {this.props.name}</h1>
    }
}

함수 컴포넌트와 다른 점은 내부에 render()라 불리는 빈 메서드를 추가하는 것과 props를 this.props로 바꿨다는 점이다.

또한 부모로부터 상속받을 수만 있는 Immutable 한 props 객체 이외에, 컴포넌트의 상태를 저장하는 state 객체가 존재한다.

state 객체의 값을 업데이트하기 위해선 반드시 setState()를 사용해야 한다.

 

※ state 객체는 컴포넌트의 상태를 관리하는 데이터가 저장되는 객체이다. 그러므로 어떤 컴포넌트에서 데이터를 관리할지를 잘 정해서 사용해야 한다.

컴포넌트 렌더링

React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트를 해당 컴포넌트에 단일 객체로 전달한다.

이 객체를 props라고 한다.

 

React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있음

const element = <Welcome name="Patric" />

 

다음 "Hello, Patric"을 렌더링 하는 예시를 보자

function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

const element = <Welcome name="Patric" />

ReactDOM.render(
    element,
    document.getElemntById('root')
)

위의 코드는 다음과 같은 과정이 일어난다.

1. <Welcome name="Patric" /> 엘리먼트로 ReactDOM.render()를 호출

2. React는 {name: 'Patric'}를 props로 하여 Welcome 컴포넌트를 호출

3. Welcome 컴포넌트는 결과적으로 <h1>Hello, Patric</h1> 엘리먼트를 반환

4. ReactDOM은 <h1>Hello, Patric</h1> 엘리먼트와 일치하도록 DOM을 효율적으로 업데이트

 

컴포넌트 합성

컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다.

이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다.

React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현됨

 

다음은 Welcome을 여러 번 렌더링 하는 App 컴포넌트이다.

function Welcome(props){
    return <h1>Hello, {props.name}</h1>
}

function App(){
    return(
    	<div>
            <Welcome name="Patric" />
            <Welcome name="John" />
            <Welcome name="Michael" />
        </div>
    )
}

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