지난 시간에는 리액트의 기본을 배웠어요. 이번 시간에는 리액트에서 중요한 개념인 컴포넌트에 대해 알아보고, state를 활용해 화면의 데이터를 변경하는 방법을 정리해 볼게요.
컴포넌트 (Component)
컴포넌트는 리액트가 HTML, CSS, 자바스크립트를 하나로 묶어 만든 재사용 가능한 UI 요소예요.
클래스형 컴포넌트
클래스형 컴포넌트는 과거에 함수형 컴포넌트가 지금의 역할을 하기 전까지 주로 사용되었던 형태예요. 생성자 함수 대신 render() 함수가 필수적으로 포함되어야 해요.
import { Component } from "react";
class ClassCom extends Component {
render() {
return <div>class type component</div>;
}
}
export default ClassCom;함수형 컴포넌트
초기 함수형 컴포넌트는 라이프사이클 기능과 state를 사용할 수 없었어요. 하지만 훅(Hook)이 도입되면서 해당 기능들을 사용할 수 있게 되었고, 현재 리액트 공식 문서에서도 함수형 컴포넌트의 사용을 권장하고 있어요. 컴포넌트의 이름은 항상 대문자로 시작해야 해요.
import React from "react";
// 일반 함수 형태
// function FuncCom() {
// return <div>function type component</div>;
// }
// 화살표 함수 형태
const FuncCom = () => {
return <div>function type component</div>;
};
export default FuncCom;이렇게 만들어진 컴포넌트는 마치 기존 HTML 태그처럼 다른 컴포넌트 내부에서 사용할 수 있어요.
import React from "react";
import "./App.css";
import ClassCom from "./components/ClassCom";
import FuncCom from "./components/FuncCom";
function App() {
return (
<div className="App">
<ClassCom></ClassCom>
<FuncCom></FuncCom>
</div>
);
}
export default App;State와 useState
리액트에서는 사용자와의 상호작용에 따라 변하는 데이터를 state(상태)를 통해 관리해요. 일반적인 자바스크립트 변수의 값이 변한다고 해서 화면이 다시 그려지지는 않아요. 상태 값이 변했을 때 화면을 다시 렌더링하려면 useState 라는 훅을 사용해야 해요.
import { useState } from "react";
const Test: React.FC = () => {
let i = 0; // 일반 변수 (화면 렌더링에 영향을 주지 않음)
const[iState, setIState] = useState<number>(0); // state
return (
<div>
i : {i}
<br />
iState : {iState}
<br />
<button
onClick={() => {
i++;
setIState((prev) => prev + 1);
console.log(`i:${i}, iState:${iState}`);
}}
>
plus
</button>
</div>
);
};
export default Test;useState 는 상태를 추가하고 변화를 감지해 화면을 새로 그려주는 훅이에요. 반환값으로 배열이 나오기 때문에 구조분해할당을 이용해 상태 이름과 상태 변경 함수로 나누어 받아요. 상태 변경 함수의 이름은 관례적으로 상태 이름 앞에 set을 붙여서 사용해요.
const [state이름, state변경함수] = useState<타입>(초기값);
// 사용 예시
const [newTodo, setNewTodo] = useState<string>("");상태를 변경하는 방법에는 두 가지가 있어요. 상황에 맞게 적절히 선택해서 사용하면 돼요.
const [i, setI] = useState<number>(0);
// 1. 타입에 맞는 값 직접 할당하기
setI(i + 1);
// 2. 콜백 함수를 통해 이전 상태(prev) 값을 가져와 처리하기
setI((prev) => {
return prev + 1;
});타입스크립트에서 type 키워드는 주로 타입을 새로 지정할 때 사용하고, interface 키워드는 새로운 구조를 잡을 때 사용한다고 이해하면 좋아요.
JSX에서 배열을 화면에 그리기
JSX 내부에서 배열을 통해 화면을 반복해서 그리고 싶을 때는 for 문을 사용할 수 없어요. 대신 배열의 내장 함수인 map() 등을 활용해요.
이때 반복되는 요소에는 고유한 key 값을 설정해 주어야 해요. key 가 없어도 화면에 출력은 되지만, 리액트가 각 요소를 정확하게 식별하고 성능을 최적화하여 관리하기 위해 꼭 필요한 속성이에요.
import React, { useState } from "react";
type Todo = {
id: number;
text: string;
isChecked: boolean;
};
const TodoList: React.FC = () => {
const title: string = "Today's Work";
const [todos, setTodos] = useState<Todo[]>([
{ id: 0, text: "잠자기", isChecked: false },
{ id: 1, text: "공부하기", isChecked: false },
]);
return (
<div className="container">
<h1>{title}</h1>
<ul className="board">
{todos.map((todo) => (
<li key={todo.id}>
{todo.text}
</li>
))}
</ul>
</div>
);
};
export default TodoList;자바스크립트의 Date 객체로 시간을 나타낼 때 toLocaleTimeString() 을 사용하면 사용자의 지역 설정에 맞는 시간 형태로 자동 변환되니 참고하면 좋아요.
