React | 컴포넌트

컴포넌트

웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소

 

1단계 : 컴포넌트 정의하기

사용하고 싶은 컴포넌트를 원하는 마크업을 추가하여 작성 (React 컴포넌트의 이름은 항상 대문자로 시작해야 함)

export default function Introduce() {
	return (
	<>
		<p> 제 이름은 권여진입니다. </p>
		<p> 만나서 반갑습니다! </p>
	</>
	);
}

 

2단계 : 컴포넌트 내보내기

export default 접두사를 사용하면 다른 파일에서 해당 컴포넌트를 가져올 수 있도록 해줌

해당 컴포넌트를 내보낼 준비가 된 것이라고 말할 수 있음

// 방법 1
export default function Introduce() { 
	return (
		// JSX 코드
	);
}

// 방법 2
function Introduce() {
	return (
		//  JSX 코드
	);
}

export default Introduce;

 

3단계 : 컴포넌트 불러오기

import문을 사용하여 MyApp 컴포넌트에 Introduce 컴포넌트를 불러오는 방법

import Introduce from './Introduce';

export default function MyApp() {
	return (
		// JSX 코드
	);
}

 

4단계 : 컴포넌트 중첩하기

import Introduce from './Introduce';

export default function MyApp() {
	return (
		<div>
			<h1> 제 블로그에 와주신 분들 감사합니다! </h1>
			<Introduce /> {/* Introduce 컴포넌트 중첩 */}
		</div>
	);
}

외부 소스로부터 컴포넌트를 사용하기 위해서, import 구문을 통해 해당 컴포넌트를 프로젝트로 가져와야 함

 

Introduce 컴포넌트는 MyApp 컴포넌트 안에서 렌더링되기 때문에 MyApp은 Introduce를 자식으로하는 부모 컴포넌트라고 말할 수 있다

 

컴포넌트를 한 번 정의한 후에 원하는 곳에서 원하는만큼 자유롭게 사용할 수 있다는 점이 React의 가장 큰 장점!

 

---

Class 컴포넌트

class는 객체를 만들기 위한 틀

 

지금은 잘 사용하지 않지만 처음 React가 등장했을 때 클래스형 컴포넌트를 사용했음

클래스형 컴포넌트는 라이프 사이클 메서드를 이용하여 컴포넌트의 생성, 업데이트, 제거에 대한 로직을 구현할 수 있는 장점이 있다

 

라이프 사이클

클래스 컴포넌트는 여러종류의 라이프 사이클 메소드를 가지며 이 메소드를 오버라이딩(상속하여 재정의)하여 특정 시점에 코드가 실행되도록함. 

 

라이프 사이클은 크게 세단계로 나눠진다

1. 생성시 (Mount)
2. 업데이트시 (Update)
3. 제거시 (Unmount)

• constructor : 컴포넌트가 생성되면 가장 먼저 실행. 초기 state를 정할 수 있음
• render : 컴포넌트를 렌더링 하는 메서드 (필수)
• componentDidMount : 컴포넌트의 첫 렌더링이 마치고 나면 호출되는 메서드
• componentDidUpdate : 리렌더링을 마친 후 변화가 모두 반영된 뒤 실행. DOM 조작에 사용가능
• componentWillUnmount : 컴포넌트가 화면에서 제거되기 전에 이 메서드 호출

 

Class 문법

class 사람 {
  constructor(이름. 나이, 성별){
    this.이름 = 이름;
    this.나이 = 나이;
    this.성별 = 성별;
  }
  말하기(){
    console.log(`${this.name} : 안녕하세요!`);
  }
}

 

기존에 만들어 뒀던 클래스를 상속시켜서 새로운 클래스를 만들 수도 있음

class 학생 extends 사람{
  constructor(이름, 나이, 성별, 성적){
    super(이름, 나이. 성별);
    
    this.성적 = 성적;
  }
  말하기(){
  	console.log(`${this.name} : 태정태세문단세`);
  }
  공부하기(){
  	console.log(`${this.name} : 공부중...`);
  }
}

 

리액트 내에서 class형 컴포넌트를 사용할 때

//클래스형 컴포넌트
import { Component } from 'react'

class App extends Component {
  render() {
    return (
      <>
        <h1>이건 클래스형 컴포넌트입니다 </h1>;
        <p> JavaScript의 클래스 문법을 활용하지요! </p>;
      </>
    );
  }
}
export default App;

 

class 형 함수를 만들때 리액트에서 만들어 둔 Compnent를 상속 받아야하며

render() 메서드가 반드시 있어야 함. render() 메서드 안에는 렌더링하고 싶은 JSX를 반환하면 됨

 

---

함수형 컴포넌트

클래스형 컴포넌트에 비해 구조가 단순하고 코드도 빠르게 작성할 수 있음

또 인스턴스 생성 과정이 없기 때문에 메모리 사용량이 줄어들고 렌더링 성능이 좋아진다

라이프 사이클 메서드를 사용하지 않고 여러가지 Hooks를 사용하여 상태관리를 더 쉽게 할 수도 있다

 

클래스형 컴포넌트의 장점에도 React 공식 사이트에서는 함수형 컴포넌트를 사용할 것을 권장한다

 

함수형 컴포넌트로 대체된 이유

• 작성해야하는 코드의 양이 많다
  
  • 클래스형 컴포넌트는 React Component를 상속해야 하고, 라이프사이클 메서드를 정의해야 하는 등 지켜야할 규칙이 많음
• 성능상 불리
  • 컴파일러가 코드 압축과 최적화를 진행하기에 더 어려운 구조이며 메모리 사용량도 함수형 컴포넌트에 비해 더 높다

 

함수형 컴포넌트 작성법

// function 사용
function App(){
  return (
    <>
      <h1>이건 클래스형 컴포넌트입니다 </h1>;
      <p> JavaScript의 클래스 문법을 활용하지요! </p>;
    </>
  );
}

// 화살표 함수 사용
const App = () => {
  return (
    <>
      <h1>이건 클래스형 컴포넌트입니다 </h1>;
      <p> JavaScript의 클래스 문법을 활용하지요! </p>;
    </>
  );
}

 

---

클래스형 컴포넌트대신 함수형 컴포넌트를 사용하는 이유의 예시

1 증가 버튼을 누르면 화면상의 'Count'가 1씩 증가하는 기능으로 비교

 

• 클래스형 컴포넌트

import React, { Component } from "react";

class MyComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0,
    };
    this.handleClick = this.handleClick.bind(this);
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>1 증가</button>
      </div>
    );
  }
}

export default MyComponent;

 

React에서 클래스형 컴포넌트를 만들 때, constructor는 컴포넌트가 생성될 때 가장 먼저 실행되는 특별한 함수임

여기서 컴포넌트의 초기 상태를 설정하거나 이벤트 핸들러를 바인딩할 수 있는데 이때 constructor 안에서 super를 호출하고 있음

super는 자식 클래스에서 부모 클래스의 constructor를 실행하는 키워드로 props를 super에 전달해 자식 컴포넌트에서 props를 사용할 수 있도록 함

 

• 함수형 컴포넌트

import React, { useState } from 'react';

const MyComponent = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(prevCount => prevCount + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
};

export default MyComponent;

 

함수형 컴포넌트로 작성을 하면 클래스형 컴포넌트와 비교하여 코드가 더 간결하고 읽기 쉬워짐을 볼 수 있음

또 useState Hook을 사용하면서 상태를 쉽고 간단하게 처리할 수 있다