컴포넌트(Component)란?

윤지섭·2022년 10월 9일

아무래도 글하나를 길게 써서 여러 정보를 담으면 그전게 기억안나거나 이 내용만 보고싶을수도 있다고 생각해서 분리하기로 했습니다.

컴포넌트(component):한가지의 기능을 수행하는 UI의 단위로
홈페이지에 있는 버튼이나 로고, 입력창 같은 부분들을 모두 각각 컴포넌트라고 보시면 됩니다

먼저 컴포넌트는 크게 두가지 함수형과 클래스형으로 나뉩니다

1.클래스 컴포넌트

import React, {Component} from 'react';

class App extends Component {
  render() {
    return (
   <>
  <button>확인</button>
   </>
  }
}

export default App;

2.함수형 컴포넌트


function App() {
  
  return (
   <>
  <button>확인</button>
   </>
  );
}

export default App; //다른 js파일에서 App함수가 불려질수있다

두개의 차이를 본다면

클래스형
1.class로 선언해주어야하고
2.Component를 상속받아야하고
3.render() 함수가 있어야 합니다

함수형
1.함수형 컴포넌트는 클래스형보다 나중에 나와서 사용및 선언이 편하고 메모리를 덜 사용합니다.
2.리액트 훅을 통해 state와 lifeCycle API를 import함으로서 사용할 수 있습니다
이외에도 여러가지 차이점이 있는데

state

클래스형 함수,

import React, {Component} from 'react';

class App extends Component {
	
    constructor(props){
    super(props)
    this.state={
    num:7,
    nums:[]
    }
    } //constructor 에서 state 초기 설정가능
    
    
    /* this.state={
    num:7,
    nums:[]
    }
    */ //constructor안이 아니더라도 초기설정이가능하다
    
    examNum = () =>{
    this.setState({num:num+1}) //state의 값을 변경하려면 this.setState를 사용한다
    }

  render() {
    return (
   <>
  <button onClick={this.examNum}>확인</button>
   </>
  }
}

export default App;

1.state가 객체형태
2.constructor안이 에서 초기설정이가능하다
3.constructor안이 아니더라도 초기설정이가능하다
4.state의 값을 변경하려면 this.setState를 사용한다

함수형 컴포넌트

import {useState} from 'react'

function App() {
  const [num,setNum]=useState(0) //초기값을 0으로 한다
  const click = ()=>{
  setNum(3);
  }
  
  return (
   <>
  <button onClick={click}>{num}</button>
   </>
  );
}

export default App; //다른 js파일에서 App이라는 이름으로 불려간다

1.state관련 api를 import해야하고
2.const [state의이름,setter함수이름]으로 num이 state이름이고 setNum(3)으로 state값 변경이가능하다
3.useState(초기값)으로 초기값을 설정할수있고 useState([])은 q빈 배열을 생성해준다

props

클래스 컴포넌트

import React, {Component} from 'react';
const {num,name}=this.props //부모 컴포넌트에서 num과 name이라는 props를 받았다면 this.props를 통해받을수있다
class App extends Component {
  render() {
    return (
   <>
  <button>확인</button>
   </>
  }
}

export default App;

1.this.props를 통해 부모 컴포넌트로부터 요소를 받을수있다

함수형 컴포넌트


function App({num,name}) { //부모 컴포넌트로부터 num,name이란 요소를 받았을경우
  
  return (
   <>
  <button>{num}</button>
  <button>{name}</button>

   </>
  );
}

export default App; //다른 js파일에서 App함수가 불려질수있다

1.파라미터 형식으로 props를 받아서 바로 사용할수있다

함수사용

클래스형 함수,

import React, {Component} from 'react';

class App extends Component {
	
    constructor(props){
    super(props)
    this.state={
    num:7,
    nums:[]
    }
    }
    
    examNum = () =>{
    this.setState({num:num+1}) //state의 값을 변경하려면 this.setState를 사용한다
    }

  render() {
    return (
   <>
  <button onClick={this.examNum}>확인</button>
   </>
  }
}

export default App;

1.함수를 사용할때 this.함수이름으로 사용해야한다

함수형 컴포넌트

import {useState} from 'react'

function App() {
  const [num,setNum]=useState(0) 
  const click = ()=>{
  setNum(3);
  }
  
  return (
   <>
  <button onClick={click}>{num}</button>
   </>
  );
}

export default App; //다른 js파일에서 App함수가 불려질수있다