리액트 만들 때의 구조
Json To TS
- 인터페이스 만들기 귀찮으니까 제이슨 샘플 하나 던지고 받아오기
- JSON to TS
- 리액트는 export 된 녀석(컴포넌트)들을 갖다 쓰는 프레임워크 (라고 나는 이해하기 시작했다ㅎ)
- 그것도 html을 리턴값으로 반환하는 특이한 함수들을 말이다.
타입스크립트의 인터페이스
- 객체의 형태 정의
- 특히 타입스크립트는 엄격하게 데이터 형의 지정을 강제하기 때문에 필요한 객체들은 인터페이스로 미리 정의할 필요가 많음
interface Person {
name: string;
age: number;
greet(): void;
}
const person: Person = {
name: 'John',
age: 30,
greet() {
console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
}
};
person.greet(); // 출력: Hello, my name is John and I am 30 years old.
useState 객체 배열 지정
import "./styles.css";
import axios from "axios";
import { useEffect, useState } from "react";
import { Activity } from "../models/Activity";
function App() {
const [activities, setActivities] = useState<Activity[]>([]);
useEffect(() => {
axios
.get<Activity[]>("http://localhost:5007/api/activities")
.then((response) => {
setActivities(response.data);
console.log(response.data);
});
}, []);
return (
<div>
<h1>Reactivities</h1>
<ul>
{activities.map((activity) => (
<li key={activity.id}>{activity.title}</li>
))}
</ul>
</div>
);
}
export default App;Style
- semantic ui 사용
리액트 구조분해 할당
구조 분해(Destructuring)는 배열이나 객체의 속성을 추출하여 개별 변수로 할당하는 JavaScript의 문법
- 구조분해할당 사용 (바로 속성을 배열 및 객체로부터 추출)
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const { name, age, city } = person;
console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'- 구조분해할당 사용하지 않음 (속성을 추출하지 않고 속성에 접근함)
const person = {
name: 'John',
age: 30,
city: 'New York'
};
const name = person.name;
const age = person.age;
const city = person.city;
console.log(name); // 'John'
console.log(age); // 30
console.log(city); // 'New York'
- 파라미터의 데이터형을 인터페이스로 지정하는데 그냥 평범한 변수명을 파라미터로 사용
- 구조분해할당을 통해서 간결하게 코드를 작성
- prop.activities 로 접근을 해서 activities로 가던 걸, 구조분해를 통해서는 {activities}로 바로 속성을 추출.
조건부 렌더링 (&&연산자)
- 무언가를 렌더링하라는 코드가 있는데, 예를 들자면 이미지를 보여달라고 할 수도 있겠다. 그런데 이미지가 없다. 그러면 무한로딩에 걸린다. 그러므로 조건부 렌더링을 해서 그러한 오류를 방지하자.
//import React from "react";
import ActivityList from "./ActivityList";
import { Grid } from "semantic-ui-react";
import { Activity } from "../../../app/models/Activity";
import ActivityDetails from "../details/ActivityDetails";
interface Props {
activities: Activity[];
}
export default function ActivitiyDashBoard({ activities }: Props) {
return (
<Grid>
<Grid.Column width="10">
<ActivityList activities={activities} />
</Grid.Column>
<Grid.Column width="6">
{activities[0] && <ActivityDetails activity={activities[0]} />}
</Grid.Column>
</Grid>
);
}activities[0]이 존재할 때만&&뒷 부분을 렌더링하라.
조건부 렌더링 (? 연산자)
function handleCreateOrEditActivity(activity: Activity) {
activity.id
? setActivities([
...activities.filter((x) => x.id !== activity.id),
activity,
])
: setActivities([...activities, activity]);
}- 주어진 활동 객체가 이미 존재하는 활동인지를 검사하고, 기존 활동을 편집할지 새로운 활동을 생성할지를 결정하여, 상태로써의 활동 목록을 업데이트하는 데 사용.
- activity.id: 활동 객체의 id 속성을 검사합니다. 만약 이 값이 존재한다면(활동 객체가 이미 존재하는 활동을 나타내는 경우), 즉 기존 활동을 편집하는 경우라면, setActivities([...activities.filter((x) => x.id !== activity.id), activity]): activities 배열에서 id가 현재 활동의 id와 다른 활동들을 필터링하고, 현재 활동을 배열에 추가하여 새로운 배열을 생성합니다. 이렇게 생성된 배열을 setActivities 함수를 통해 상태로 설정하여, 기존 활동을 업데이트합니다.
- activity.id가 존재하지 않는다면(활동 객체가 새로운 활동을 나타내는 경우), 기존 활동이 아닌 새로운 활동을 생성하는 경우입니다. 이 때는, setActivities([...activities, activity]): 기존의 활동 배열에 새로운 활동을 추가하여 새로운 배열을 생성합니다. 이렇게 생성된 배열을 setActivities 함수를 통해 상태로 설정하여, 새로운 활동을 추가합니다.
Undefined
const [selectedActivity, setSelectedActivity] = useState<
Activity | undefined
>(undefined);
....
function handleSelectedActivity(id: string) {
setSelectedActivity(activities.find(x => x.id === id))
}- activities.find(x => x.id === id)는 activities 배열에서 활동을 찾는데 사용.
- find 함수는 조건을 만족하는 첫 번째 요소를 반환하거나, 조건을 만족하는 요소가 없을 경우 undefined를 반환.
- 이것은 선택된 id와 일치하는 활동이 activities 배열에서 찾아지면 해당 활동이 setSelectedActivity 함수를 통해 선택되도록 설정함. 만약 해당 id와 일치하는 활동이 없으면 setSelectedActivity에 undefined가 전달되어 선택된 활동이 없음을 나타냄.
- 즉 선택된 활동을 변경하는 함수. id를 매개변수로 받아 해당 id와 일치하는 활동을 activities 배열에서 찾아 선택된 활동으로 설정.
Hooks 좀 더 살펴보기
useState
const [1., 2.] = useState[3.]
- : 내가 다루고 싶은 어떤 상태를 나타내는 변수
- : 1.에 대한 차후 변화를 담당할 함수
- : 1., 2.를 생성하면서 동시에 1--을 초기화하는 함수
const [activities, setActivities] = useState(--)
setActivities([...activities, newActivity]);
- 위의 예제에서는 기존의 activities 배열에 newActivity를 추가하여 새로운 배열을 생성. 이 새로운 배열은 setActivities 함수의 파라미터로 전달되어 상태를 업데이트.
activities.filter((x) => x.id !== activity.id);
- 기존의 activities 배열에서, 활동의 id가 현재 activity의 id와 다른 모든 활동들을 필터링 -> activity.id와 일치하지 않는 모든 활동들을 새로운 배열로 반환
- 앞서 필터링한 활동들에 현재 activity를 추가하여 새로운 배열을 생성합. 이렇게 생성된 배열은 기존의 activities 배열에서 activity.id와 일치하지 않는 모든 활동들과 현재 activity를 포함.
- 새로운 배열을 setActivities 함수를 통해 상태로 설정. 이렇게 함으로써, 기존의 activities 배열에서 현재 activity를 업데이트하거나 추가한 상태로 변경.
- 위의 코드는 기존의 activities 배열에서 현재 activity의 id와 다른 활동들을 유지하면서, 현재 activity를 업데이트 또는 추가하여 상태를 업데이트하는 것을 나타냄.
useEffect
UUID
npm install uuid
Working Abroad ...