3. 컴포넌트

함수 컴포넌트 vs 클래스형 컴포넌트 

의 차이를 알아보자!!

[함수 컴포넌트]

import './App.css';

function App() {

const name = '리액트';

return <div className='App'>{name}</div>;

}

export default App;

 

[클래스형 컴포넌트]

import './App.css';

import { Component } from 'react';

 

class App extends Component {

render() {

const name = '리액트';

return <div className='react'>{name}</div>;

}

}

export default App;

 

 

차이점(클래스형 컴포넌트의 경우)

•  state기능 및 라이프 사이클 기능을 사용할 수 있음
• 임의 메서드를 정의 할 수 있음
• render함수가 꼭 있어야 함

*ES6이전에는 자바스크립트에 클래스라는 것이 없었고, prototype이라는 문법을 사용하였다

 

함수 컴포넌트의 장점

 

함수 컴포넌트

[장점]

• 선언하기가 훨씬 편함
• 메모리 자원도 클래스형 컴포넌트보다 덜 사용
• 배포할 때도 함수 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작음

[단점]

• state와 라이프사이클 API사용 불가  -> Hooks라는 기능 도입되면서 해결

**리액트 공식 매뉴얼에서는 컴포넌트를 새로 작성할 때 함수 컴포넌트와 Hooks를 사용하도록 권장

 

잠깐! 화살표 함수란?

 

ES6에서 등장한 함수를 표현하는 새로운 방식이다.

함수를 파라미터로 전달할 때 유용하다

그렇지만 기존의 function을 대체할 수는 없다! 용도가 다르기 때문!!(대표적으로 this가 가르키는 값이 다르다)

 

일반 함수는 자신이 종속된 객체를 this로 가리키지만, 화살표 함수는 자신이 종속된 인스턴스를 가리킨다

---

 

3.3 Props

해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다

 

#3.3.1 JSX 내부에서 props를 렌더링 하는 방법

const MyComponents = (props) => {
return <div>제 이름은 {props.name}입니다.</div>;
};

 

3.3.2 컴포넌트를 사용할 때 props 값 지정하기

 

return <MyComponents name='minseok' />;

 

 

#3.3.3 props 기본값 설정 : defaultProps

 

MyComponents.defaultProps = {

name: '기본이름',

};

 

#3.3.4 태그 사이의 내용을 보여 주는 children

 

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있는데, 바로 children이다

 

const MyComponents = (props) => {

return (

<div>

제 이름은 {props.name}입니다.

<br />

children 값은 {props.children}

입니다.

</div>

);

};

 

여기서 말하는 chidren은 부모 컴포넌트에서 컴포넌트 사이의 있는 내용이다 보면

이런 식으로 적었을 경우 children은 리액트이다.

 

#3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

위에 쓴 것을 보면

props.name

props.children

와 같이 props. 라는 키워드를 항상 앞에 부여 주는데 ES6부터 이를 간단하게 해줄 비주고화 할당 문법이 등장하였다

 

const MyComponents = (props) => {
  const { name, children } = props;
  return (
    <div>
      제 이름은 {name}입니다.
      <br />
      children 값은 {children}
      입니다.
    </div>
  );
};

와 같이

const { name, children } = props;   //이런 식으로 사용할 수 있다

 

객체에서 값을 추출하는 문법을 비구조화 할당이라고 부른다.

 

#3.3.6 propTypes를 통한 props 검증

 

import PropTypes from 'prop-types'; 를 선언해주어야 한다

 

내가 지정한 형태로 전달하지 props를 전달하지 않는다면 개발자 도구의 Console창에서 에러가 뜬다.

isRequired를 통해서 필수로 받아야 하는 값을 넣을 수 있다

 

PropTypes의 종류는 검색해서 더 많은 종류를 찾아보면서 하도록 하자

 

클래스형 컴포넌트에서 defaultProps와 propTypes를 class 내부에서 지정하는 방법

class MyComponents extends Component {
  static defaultProps = {
    name: '기본이름',
  };
  static propTypes = {
    name: PropTypes.string,
  };
  render() {
    const { name, children } = this.props;
    return (
      <div>
        제 이름은 {name}입니다.
        <br />
        children 값은 {children}
        입니다.
      </div>
    );
  }
}

---

State

State는 컴포넌트 내부에서 바뀔 수 있는 값이다. props는 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 해당 props를 읽기 전용으로만 사용할 수 있다

 

State의 두가지 종류

1. 클래스형 컴포넌트가 지니고 있는 state

2. 함수 컴포넌트에서 useState라는 함수를 통해 사용하는 state

 

[클래스형 컴포넌트가 지니고 있는 state]

 

class Counter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      number: 0,
    };
  }
  render() {
    const { number } = this.state;
    return (
      <div>
        <h1>{number}</h1>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
          }}
        >
          +1
        </button>
      </div>
    );
  }
}

 

constructor 메서드를 작성하여 설정

super(props)를 호출해 주어야 한다

클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출

 

this.setState함수가 state의 값을 바꿀 수 있게 해준다

 

하지만 위와 같이 constructor메서드를 선언하여 state의 초깃값을 설정하는 방법 말고

 

 state = {
    number: 0,
    fixedNumber: 0,
  };

와 같이 간단하게 초깃값을 설정할 수 있다

 

# this.setState에 객체 대신 함수 인자 전달하기

<div>
        <h1>{number}</h1>
        <h2>{fixedNumber}</h2>
        <button
          onClick={() => {
            this.setState({ number: number + 1 });
            this.setState((prevState, props) => {
              return {
                number: prevState.number + 1,
              };
            });
          }}
        >
          +1
        </button>
      </div>

다음과 같이 사용하면 prevState를 통해서 객체 대신 함수 인자를 전달할 수 있다

prevState는 기존 상태이고, props는 현재 지니고 있는 props를 가리킵니다. 업데이트 과정에서 props가 필요하지 않다면 생략해도 된다

 

UseState사용하기

배열 비구조화 할당에 대해 알아보자

 

const array=[1,2];

const one=array[0];

const two=array[1];

을 다음과 같이 배열 비구조화 할당을 이용해 나타낼 수 있다

 

const array=[1,2];

const [one,two]=array;

 

useState는 간단하게 다음과 같이 사용할 수 있다

 

import React, { useState } from 'react';

const Say = () => {
  const [message, setMessage] = useState('');
  const onClickEnter = () => setMessage('안녕하세요!');
  const onClickLeave = () => setMessage('안녕히가세요!');
  return (
    <div>
      <button onClick={onClickEnter}>입장</button>
      <button onClick={onClickLeave}>퇴장</button>
      <h1>{message}</h1>
    </div>
  );
};

export default Say;

useState는 한 컴포넌트에서 여러 번 사용해도 상관없다

 

#주의사항

 

state의 값을 바꿔야 할 때는 setState 또는 useState를 통해 전달받은 세터 함수를 사용해야 한다

 

객체에 대한 사본을 만들 때는 spread연산자라 불리는 ...을 사용하여 처리한다

ex) const nextObject={...object,b:2};

배열에 대한 사본을 만들 때는 배열의 내장 함수들을 활용한다

ex) nextArray=array.concat({id:4});