[TIL] 20240510 - Component

컴포넌트

---

클래스형 컴포넌트

ClassCom.tsx

import { Component } from "react";

class ClassCom extends Component{
  render(){
    return (
      <div>
        Class Component
      </div>
    )
  }
}

export default ClassCom;

App.tsx

import ClassCom from './ClassCom';

function App() {
  const name = "react";

  return (
    <div className="container">
      <ClassCom></ClassCom>
    </div>
  );
}

export default App;

함수형 컴포넌트

최근에는 함수 컴포넌트 + Hooks 사용 권장

FuncCom.tsx

import React from 'react';

function FuncCom()  // 화살표 함수 : const FuncCom = () =>
{
  return(
    <div>
      Function Component
    </div>
  )
}

export default FuncCom;

App.tsx

import FuncCom from './FuncCom';

function App() {
  const name = "react";

  return (
    <div className="container">>
      <FuncCom></FuncCom>
    </div>
  );
}

export default App;

state

---

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

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

[msg, setMsg] = useState

• 인자 : 상태의 초깃값

• 배열 첫 번째 원소 : 현재 상태

• 배열 두 번째 원소 : Setter 함수 (상태를 바꾸어 주는 함수)

구조분해할당

---

배열

const fruits = ['apple', 'banana', 'grape'];
const [a, b, g] = fruits;
console.log(`a : ${a}, b : ${b}, g : ${g}`)  // a : apple, b : banana, g : grape

객체

const student = {
	name : 'jini',
	age : 24
};
const { name, age } = student;
console.log(`name : ${name}, age : ${age}`);  // name : jini, age : 24

map 함수

---

import React from 'react';

const MapTest = () => {
  const fruits = ['apple', 'banana', 'orange'];

  return(
    <div>
      <h2>Fruit</h2>
      <ul>
        {
          fruits.map((fruit, index) => (
            <li key={index}>{fruit}</li>
          ))
        }
      </ul>
    </div>
  )
}

export default MapTest;