[리.다.기] 컴포넌트

react 클래스형과 함수형의 차이

• 클래스형 컴포넌트의 경우, state 및 라이프사이클 기능을 사용 할 수 있다는 점
• render함수가 반드시있어야하고, 그 안에서 보여줘야 할 JSX를 반환해야한다.
• props를 조회 해야 할 때에는 this.props를 조회

import React, { Component } from 'react';

class Hello extends Component {
  static defaultProps = {
    name: '이름없음'
  };
  render() {
    const { color, name, isSpecial } = this.props;
    return (
      <div style={{ color }}>
        {isSpecial && <b>*</b>}
        안녕하세요 {name}
      </div>
    );
  }
}

export default Hello;

• 함수형 컴포넌트는 클래스형 보다 훨씬 간편하다
• 메모리 자원또한 덜 사용한다
• 클래스형과는 다르게 state, 라이프사이클API사용이 불가하다.
• ⇒ 리액트 훅으로 해결 (useState)

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
      {isSpecial && <b>*</b>}
      안녕하세요 {name}
    </div>
  );
}

Hello.defaultProps = {
  name: '이름없음'
};

export default Hello;

---

리액트에서 모듈이란? 모듈화?

모듈은, 여러기능을 담고있는 코드를(여러파일) import, export를 사용해

해당 파일안에서 특정코드만 가져와서 작업하는 방식이다.

---

태그사이 내용을보여주는, Children

컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children을 조회

//App.js (부모컴포넌트)

import MyComponent from './MyComponent

const App = () => {
  return <MyComponent>Chinldren!!</MyComponent>
};

export default App;

//MyComponent.js (자식컴포넌트)

const MyComponent = ({children}) => {
  return (
    <div> children값은 {children}입니다 </div>
  );
};

export default MyComponent;

---

리액트Hook, useState

컴포넌트에서 동적인 값을 상태(state)라고 부른다.

리액트에 useState라는 함수가 있는데, 이것을 사용하면 컴포넌트에서 상태를 관리 할 수 있다.

 

import React, { useState } from 'react';

function Counter() {
  const [number, setNumber] = useState(0);

  const onIncrease = () => {
    setNumber(prevNumber => prevNumber + 1);
  }

  const onDecrease = () => {
    setNumber(prevNumber => prevNumber - 1);
  }

  return (
    <div>
      <h1>{number}</h1>
      <button onClick={onIncrease}>+1</button>
      <button onClick={onDecrease}>-1</button>
    </div>
  );
}

export default Counter;

useState를 사용 할 때에는 상태의 기본값을 파라미터로 넣어서 호출해준다.

이 함수를 호출해주면 배열이 반환되는데,

여기서 첫번째 원소는 현재 상태, 두번째 원소는 Setter 함수이다.

const numberState = useState(0);
const number = numberState[0];
const setNumber = numberState[1];

//배열 비구조화 할당 한줄로 요약 
const [number, setNumber] = useState(0);