[생활코딩] React component style - class(클래스형) vs function(함수형)

 

 

▼ 리액트는 클래스형(class)과 함수형(function)으로 컴포넌트를 만들 수 있다.

 

 

클래스형 컴포넌트

• 리액트의 기능을 최대로 끌어 올릴 수 있다.
• 클래스 문법을 알아야한다. 
• 대부분의 리액트 자료들이 클래스 방법으로 되어 있다.

함수형 컴포넌트

• 함수의 문법만 알면 사용할 수 있다.
• 컴포넌트 내부의 state를 만들거나 , life cycle API를 사용할수 없었으나 최신 리액트에서 hook이 도입 되어서 내부적으로도 상태를 다룰 수 있게 되었다.

 

☑ 클래스방식 컴포넌트의 심부름꾼 단계에서 클래스 방식과 대등한 단계로 격상된 이유는 hook 덕분이다.

 

 

 

---

 

강의내용 

1. npx create-react-app 으로 리액트 프로젝트 생성
   * create-react-app이 없다면  npx install -g create-react-app 
   * create-react-app이 있다면 npx create-react-app 프로젝트명
2. 사용하지 않는 기본 소스 정리
   * App.css 파일과 index.css 파일 내용 삭제
   * App.js 파일 정리

import React from 'react';
import './App.css';

function App() {
  return (
    <div className="App">
      <h1>hello world</h1>
    </div>
  );
}

 

3. 함수형 컴포넌트 생성 | App.js에 함수형 컴포넌트를 하나 생성하기

function FuncCopm(){
	return(
    	<div className="container">
    		<h2> function style component</h2>
    	</div>
    );
}

함수방식으로 컴포넌트를 만들때는 return( ) 값만 만들어 주면된다.

본인 자신이 렌더함수인것..

 

 

 

 

4. 클래스형 컴포넌트 생성 | App.js에 클래스형 컴포넌트 하나 생성하기

class ClassComp extends React.Component{
	render(){
    	return(
        	<div className="container">
            	<h2>class style component</h2>
            </div>
        )
    }
}

클래스형으로 만들때는 메소드를 정의해서 render( ){ 
                                                           return(  )

                                                       } 함수를 이용한다.

 

 

5. app.js 에 스타일 수정을 위해 app.css 수정하기

.container{
  border:5px solid red;
  margin:5px;
  padding:5px;
}

 

 

 

 

---

- class 에서 state사용 법 

App 컴포넌트에서 각 컴포넌트에 initNumber의 값을 {2}로 설정

function App() {
  return (
    <div className="container">
      <h1>hello world</h1>
      <FuncComp initNumber={2}></FuncComp>
      <ClassComp initNumber={2}></ClassComp>
    </div>
  );
}

 

 

* class형에서 props로 데이터를 받아오기 

 

this.props.initNumber

class ClassComp extends React.Component{
  render(){
    return(
      <div className="container">
        <h1>class style component</h1>
        <p>Number : {this.props.initNumber} </p>
      </div>
    )
  }
}

 

 

* function 형으로 데이터 받아오기 

 

함수도 props를 쓸 수 있는데, this를 쓰는것이 아니고 함수를 리액트가 호출할때 파라미터의 인자 값으로 전달된 props값을 전달하도록 약속되어있다.

 

그래서 props라는 파라미터 이름을 정해주고, 파라미터 안에 initNumber라는것이 담겨 있을 것이다.

props라는 파라미터의 값은 변수이름이기 때문에 아무거나 해도된다.

 

 

function FuncComp(props){
  return(
    <div className="container">
      <h1>function style component</h1>
      <p>Number : {props.initNumber} </p>
    </div>
  );
}

 

 

컴포넌트가 내부적으로 자기의 상태를 바꾸기 위해 사용하는 state는 어떻게 사용하는가?

 

 

이전부터 state를 가지고있었던 class 방식에서는 초기값이 필요하다.

state를 정의하고

 

 

props 대신 state를 적는다.

 

1. state 초기화(셋팅)

2. state값을 사용하고

3. state값을 변경하는것을

 

 

funcition에서는 할 수 없었다.

function은 props로 전달되는 값을 화면에 표현해주는 용도로 간단하게 사용하는 컴포넌트에서만 썻고,

다양한 기능을 필요로하는건 class를 통해 만들어졌으나 이제 hook을 통해 function에서 state를 사용할 수 있게 됐다..

 

 

 

 

 

HOOK이란?

HOOK은 use로 시작된다.

 

class와 동일하게 state를 만들어 줄것이다. (function에)

 

1. useState를 호출(import)해온다.

 

2. useState를 쓰면 무조건 배열의값이 return된다. 배열은 2개의 값으로 이루어져 있다.

 

우리가 state를 만들고 싶다면, useState에 어떠한 값을 전달하면 우리가 만드는 값의 초기값이 된다.

그렇게해서 리턴된 값에 그 첫번재 자리가 그 값이 된다. class로 정의한것과 똑같은것..

 

this는 클래스에서만 사용하기 떄문에 bind또한 사용하지 않음

 

 

 

함수방식(function)에서 state를 만들때는 누구를 호출하는가 ? React. useState를 호출한다.

그리고 그 state의 인자로 그 state의 초기 값이 온다.

useState는 배열을 return하는데, 두개값으로 이루어져있는데

그중의 첫번째 값과 두번째값은 [상태값, 상태를 변경할수있는 함수]각각 이거고

 

첫번째값과 두번째값을 통해서 함수안에 state를 사용할 수 있게 되는 것이다.