[리액트 기초] 컴포넌트, 클래스형 컴포넌트, 함수형 컴포넌트, props, 구조분해, state,useState

컴포넌트

리액트로 만들어진 앱을 이루는 최소한의 단위

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

 

예시 ) 

App.js

import TodoTemplate from "./TodoTemplate";

 

 

 

클래스형 컴포넌트

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

 

함수형 컴포넌트

const Welcome = ({props}) => {
	return <h1>Hello, {props.name}</h1>; })

 

 

클래스형 컴포넌트와 함수형 컴포넌트 차이

클래스형 컴포넌트	함수형 컴포넌트
render 함수 필요하고 JSX 반환	return문으로 실행 후 사라져 메모리 자원 절약
state 사용으로 상태 저장	hook을 사용, 선언이 편함

결과물의 파일 크기와 성능 차이는 함수형 컴포넌트가 좋지만 차이가 적다.

 

 props

사용법 ) 

App.js

import React from 'react';
import Component form "./Component" 


const App = () => {
  const name = "Judith-hopps"
  return (
    <div>
      <Componenet name = {name} />
    </div>
  );
};

export default App;

 

Component.js 

import React from 'react';

const Component = (props) => {
  
  return (
    <div>
      {props.name}
    </div>
  );
};

export default Component

 

 

구조분해 = 비구조화 할당 방법

 

1. 함수형 컴포넌트 - props.name을 할당 또는 객체 디스트럭쳐링

후보1) 
import React from 'react';

const Component = ({name}) => {
  
  return (
    <div>
      {name}
    </div>
  );
};

export default Component

후보2)
import React from 'react';

const Component = (props) => {
  const {name} = props
  return (
    <div>
      {name}
    </div>
  );
};

export default Component

 

2. 클래스형 컴포넌트

render() {
	{name} =this.props }

 

 

children : 태그 내용 확인

{props.children}

 

 

기본값 설정

Componenet.defaultProps = {
	name : 'judith-hopps' }

 

 

타입 설정

import 'propTypes' from 'props-types' 

Mycomponenet.propTypes = {
	name : PropTypes.String }

 

 

필수 props

Component.propTypes{
	name : PropTypes.String.isRequired
}

 

 

 state

컴포넌트 내부에서 바꿀 수 있는 값

 

state는 컴포넌트에 대한 데이터 또는 정보를 포함하는 데 쓰이는 리액트 내장 객체다. 컴포넌트 상태는 시간이 지남에 따라 변경될 수 있다. 변경될 때마다 컴포넌트가 다시 렌더링된다. state 변경은 사용자 작업 또는 시스템 생성 이벤트에 대한 응답으로 발생할 수 있으며 이 변경은 컴포넌트의 동작, 렌더링 방법을 결정한다

 

클래스형 컴포넌트

1. constructor 사용

class Component extends Component {
	constructor(props) {
    	super(props) 
        this.state = {number:3}
    }
    render () {
    	const {number} = this.state
        return {number}
    }
}

 

2. constructor 사용 X

class Component extends Component {
	state = {number : 3}
    render () {
    	const {number} = this.state
        return {number}
    }
}

 

 

함수형 컴포넌트 - useState

const Say = () => {
 	const [color,setColor] = useState('black');
    return ( 
    	<>
        	<button onClick={()=>setColor("red")} />
            <h1 style={{color}} > Text </h1>
        </>
   )
}