[React] Class 컴포넌트 & Function 컴포넌트

Class Component & Function Component

 

리액트에서는 컴포넌트를 생성할 수 있는 방법이 2가지 있는데 이는 Class와 Function이다.

기존에는 Class 컴포넌트만 존재했지만, React Hook이 도입되면서 Function 컴포넌트도 많이 도입되기 시작했다.

 

---

Class 컴포넌트

: React에서 제공하는 Component 클래스를 상속받음

: 멤버 변수에 접근할 때 this를 항상 바인딩 해야 함

: 상태, 데이터를 담을 수 있는 state object를 가지며, state 업데이트 시 render()가 호출되어 업데이트된 것이 보여짐

>> 다양한 컴포넌트의 상황에 따라 구현해 놓은 함수를 리액트가 알아서 불러주는 특징이 있음

 

 

[App.js]

import './App.css';
import MyComponent from './MyComponent';

function App() {
  return (
    <div className="App">
    	<MyComponent name="hong" age="20"/> //(1)
      	<MyComponent info={{name:"song", age:"20"}} /> //(2)
      	<MyComponent name="hong" age={20}/> //(3)
     </div>
  ); 
}

export default App;

- 부모(App)에서 자식(MyComponent)으로 값을 넘겨주기 위해 props로 값을 줄 수 있음

 

(1) 각각의 변수를 담아 MyComponent에서 호출이 가능

(2) info 객체에 담아 MyComponent에서 호출이 가능 (보내줘야 하는 데이터가 많을 경우 객체로 많이 보냄)

(3) 문자열이 아닌 숫자의 경우 중괄호 { } 에 넣어서 줘야 함

* 변수, 객체 뿐 아니라 태그 자체를 작성해서 넘겨줄 수 있음

 

 

[MyComponent.js]

import React, {Component} from 'react'; //(1)

class MyComponent extends Component{
	render(){
   		let {name, age} = this.props.info; //(4)

      	return (
       		<div>
         		<h1>{this.props.name} </h1>
         		<h1> {this.props.age} </h1> //(2)

         		<h1> {this.props.info.name} </h1>
         		<h1> {this.props.info.age} </h1> // (3)

        		<h1> {name} </h1>
        		<h1> {age} </h1> // (5)

       		</div>
      	) 
  }
    
}

export default MyComponent;

(1) Class 컴포넌트에서는 Component를 상속받기 import가 필요하며, Function 컴포넌트에서는 import 하지 않아도 됨

(2) this.props 는 부모(App.js)로부터 가지고 온 것을 의미

(3) 객체로 가져올 때에는 객체의 이름을 넣어 this.props.객체명으로 호출 가능함

(4) (5)와 같이 변수명만 사용하는 경우 객체를 분리해서 각각 담아야 함

(5) (4)에서 가져온 객체들을 사용하며, 이름은 동일해야 함

// 자바 스크립트에서는 객체를 가져와 담을 경우 해당 객체를 그대로 사용할 수 있음
let user = {id:10, name:'John', age:30};
let {id, name, age} = user;

console.log(id);
console.log(name);
console.log(age);

 

---

Function 컴포넌트

: React Hook이 도입되면서 사용하게 된 컴포넌트

: Class 컴포넌트가 어렵고, 멤버 변수 접근 시 this를 바인딩 해야 하는 경우 호출이 불편해서 도입

 

[App.js]는 Class 컴포넌트와 동일함

 

[MyComponent.js]

function MyComponent(props){ // (1)
    let {name, age} = props.info;

    return (
        <>
            <h1> {name} </h1>
            <h1> {age} </h1>
        </>
    )
}
    
function MyComponent({name, age}){ // (2)

    return (
        <div>
            <h1> {name} </h1>
            <h1> {age} </h1>
        </div>
    )
}

export default MyComponent;

- Function 컴포넌트는 return 내에 최종으로 주는 태그는 하나로 묶여 있어야 함

함수형 컴포넌트에서는 props의 값을 두가지 형태로 받아올 수 있는데 아래와 같다.

(1) props를 가져와 호출하는 경우 : props를 통해 값을 받아와 사용

(2) props를 생략하고 변수 자체를 가져오는 방식

- (1), (2) 중에서 (2)의 방식을 많이 사용함