[10주차] - [9기] 타입스크립트로 함께하는 웹 풀 사이클 개발(React, Node.js) 10회차 - 46

이번 글에서는 React를 학습하면서 직접 구현해본 기능들을 정리해보려고 합니다.

기초 개념부터 실제 기능 구현까지 흐름을 중심으로 정리했습니다.

---

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

React 컴포넌트는 크게 두 가지 방식으로 작성할 수 있습니다.

클래스형 컴포넌트

classMyComponentextendsReact.Component {
  render() {
return<div>Hello</div>;
  }
}

• state, lifecycle 사용 가능
• 코드가 비교적 복잡

 함수형 컴포넌트 (요즘 표준)

functionMyComponent() {
return<div>Hello</div>;
}

• Hooks로 상태 관리 가능 (useState)
• 코드가 간결하고 유지보수 용이

 요즘은 거의 함수형 컴포넌트 + Hooks 사용

---

 2. state 사용하기

React에서 상태 관리는 핵심입니다.

import {useState }from"react";

functionCounter() {
const [count,setCount]=useState(0);

return (
<div>
<p>{count}</p>
<buttononClick={() =>setCount(count+1)}>증가</button>
</div>
  );
}

✔ state가 변경되면 자동으로 화면이 다시 렌더링됨

---

 3. 구조 분해 할당

props나 state를 더 깔끔하게 사용하기 위한 문법입니다.

functionUser({ name, age }) {
return<div>{name} - {age}</div>;
}

✔ 코드 가독성이 좋아짐

✔ 실무에서 거의 필수

---

 4. 데이터 반복 처리 (map)

리스트를 화면에 출력할 때 사용합니다.

constitems= ["React","Vue","Angular"];

return (
<ul>
    {items.map((item,index) => (
<likey={index}>{item}</li>
    ))}
</ul>
);

✔ 반드시 key 필요

✔ 동적 UI의 기본

---

 5. 체크박스 기능 추가

사용자의 선택 상태를 관리하는 기능입니다.

const [checked,setChecked]=useState(false);

return (
<input
type="checkbox"
checked={checked}
onChange={(e) =>setChecked(e.target.checked)}
/>
);

✔ 이벤트 처리 (onChange) 중요

✔ 상태와 UI 연결 이해 필수

---

 6. 새로운 게시글 추가하기

입력값을 받아 리스트에 추가하는 기능입니다.

const [list,setList]=useState([]);
const [input,setInput]=useState("");

constaddItem= () => {
setList([...list,input]);
setInput("");
};

✔ 불변성 유지 (...list)

✔ React 핵심 개념 중 하나

---

 7. 시계 기능 추가

현재 시간을 실시간으로 보여주는 기능입니다.

useEffect(() => {
consttimer=setInterval(() => {
setTime(newDate());
  },1000);

return () =>clearInterval(timer);
}, []);

✔ useEffect 활용

✔ cleanup 함수 중요

---

 8. 게시글 삭제 기능

특정 항목을 리스트에서 제거하는 기능입니다.

constdeleteItem= (index) => {
setList(list.filter((_,i) =>i!==index));
};

✔ filter 활용

✔ 배열 조작 기본 패턴

---

 전체 정리

이번 학습을 통해 다음과 같은 React 핵심 개념을 익혔습니다:

• 컴포넌트 구조 이해
• state 관리
• 이벤트 처리
• 리스트 렌더링
• CRUD (추가/삭제)

 단순한 문법이 아니라

"상태 → UI 반영 흐름" 을 이해하는 것이 핵심입니다.