Component (23.09.05)

현·2023년 9월 5일

React

목록 보기

2/30

💡 Component

특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위

React에서는 component를 파일 단위로 작성한 뒤 필요한 위치에서 import 해서 사용할 수 있다. 파일 단위로 작성하기 때문에 가독성, 재사용성, 유지 보수성 등에서 유리하다. 👍

📁 특징

컴포넌트는 다른 컴포넌트를 포함할 수 있다. (부모-자식 관계)
부모 컴포넌트는 자식 컴포넌트에게 props라는 속성을 전달할 수 있다.
자식 컴포넌트는 props를 통해 전달받은 값을 사용하여 UI를 렌더링한다.

이러한 특징을 가지는 React 컴포넌트는 두 가지 종류로 나누어진다.

📁 종류

클래스형 컴포넌트

React.Component 클래스를 상속받아 구현함
함수형 컴포넌트

함수로 구현함

이 두 가지 컴포넌트를 만드는 방법은 아래에서 자세히 알아보자.

👀 코드로 살펴보기

🔎 클래스형 컴포넌트 만들기

Component 상속 받기

render() 함수 작성하기(필수)

만든 class를 export default 지정하기

Exam1.js

import React, { Component } from 'react';
// node-modules 폴더에 있는 react 패키지를 가져옴

// 클래스형 컴포넌트 만들기

class Exam1 extends Component{

    constructor(props){
        super(props);
        this.state = { count : 0};
    }

    handleClick = () => {
        this.setState({ count : this.state.count + 1 });
    }

    // 화면 렌더링 시
    // render() 함수에서 반환된 값이 화면에 출력됨
    render(){
        return(
            <>
                <h2>클래스형 컴포넌트</h2>
                <h1>Count : {this.state.count}</h1>
                <button onClick={this.handleClick}>Increment</button>
            </>
        );
    }

    /* 
    document.getElementById(버튼).addEventListner("click", ()=>{

        const count = document.getElementById(카운트);

        count.innerText = Number(count.innerText) + 1;
    })
    
    
    */
}

export default Exam1;

🔎 함수형 컴포넌트 만들기

함수 생성하기

return 구문에 출력하고자 하는 html 코드 작성

만든 함수를 export default 지정하기

Exam2.js

import React, { useState } from 'react';

// 함수형 컴포넌트

function Exam2(){
    
    const [count, setCount] = useState(100);
    // count라는 변수에 초기값 100 대입
    // count 값(상태)을 변경할 때는 setCount 함수를 이용

    const handleClick = () => {
        setCount( () => count - 1 )
    };

    return(        
        <>
            <h2>함수형 컴포넌트</h2>
            <h1>Count : {count}</h1>
            <button onClick={handleClick}>Decrement</button>
        </>
        
    );
}

export default Exam2;

이제 이렇게 만든 컴포넌트들을 App.js에서 import 해 볼 것이다.

🔎 컴포넌트 import 하기

리액트의 컴포넌트는 딱 하나의 요소만을 반환할 수 있다.
여러 요소를 반환하고 싶을 때는 부모 요소로 묶어 준다.

💭 fragment(<></>)란?

반환되는 요소를 감쌀 때 사용하는 태그
-> 해석은 되지 않음!

App.js

import './App.css';

// components 폴더의 Exam1.js를 가져와서 사용
// 사용할 때 이름을 Ex1으로 지정
import Ex1 from './components/Exam1';
import Ex2 from './components/Exam2';

function App() {
  
  return (
    <>
      {/* jsx 주석 */}
      <h1>Hello React!!!</h1>
  
      <div>리액트 배운다~</div>

      <Ex1 />

      <Ex2 />
    </>
  );
}

export default App;