리액트(2)

컴포넌트(Component)

1. 클래스형 컴포넌트

import { Component } from "react"; 
class ClassCom extends Component { // 반드시 상속 필요
  render() {
    return (
      <div>
        클래스형 컴포넌트
      </div>
    )
  }
}

export default ClassCom;

 

2. 함수형 컴포넌트 

: 클래스형보다 간단함, 더 많이 사용

import React from 'react';
function FuncCom() {
  return (
    <div>
      함수형 컴포넌트
    </div>
  )
}

export default FuncCom;

 

구조 분해 할당

: 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식

➡️구조 분해 할당을 통해 colors 배열의 값을 차레대로 f,s,t 변수에 담을 수 있다. 

➡️객체 또한 마찬가지로 구조 분해 할당을 통해 person 객체의 속성 값을 name, age, city 에 차례대로 담을 수 있다. 

데이터 반복 처리하기

import React from 'react';

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

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

export default MapTest;

 

map 함수 사용하기

• map 함수는 fruits 배열의 각 요소에 대해 한 번씩 실행된다.
• map은 각 반복마다 콜백 함수 (fruit, index) => (...) 를 호출한다.
• fruit: 현재 처리 중인 배열 요소 (예: 'apple', 'banana', 'orange')
• index: 현재 요소의 인덱스 (0, 1, 2)
• 콜백 함수는 각 fruit을 <li> 요소로 변환한다.
• map은 콜백 함수가 반환한 각 결과를 모아 새로운 배열을 만든다.

[
  <li key={0}>apple</li>,
  <li key={1}>banana</li>,
  <li key={2}>orange</li>
]

 

➡️ 결과적으로 위와 같은 배열이 생성된다. 

---

🌟배운 점

오늘 리액트로 투두리스트를 만드는 실습을 진행했다. 이 과정에서 자바스크립트를 더 공부해야겠다고 느꼈다. 아직 filter 나 map과 같은 배열 메서드를 사용하는 데 익숙하지 않은 것 같다. 또한, useState를 통한 상태 관리 방법을 배웠지만, 그 동작 원리를 완전히 이해하기까지는 시간이 더 필요할 것 같다. 혼자 복습하는 시간을 가져야겠다.