12-2 리액트 component, state / TodoList.tsx
컴포넌트
리액트에서 기능을 추가, 확장할 때마다 하나의 파일에서만 작성 관리하게 되면, 모듈화도 안되고, 가독성도 떨어지면서 유지보수의 난이도가 올라가게됩니다.
다른 프로그램언에서도 함수를 사용하거나, 별도의 기능을 처리하는 컨트롤러, 라우터 등으로 나누는 것처럼.
리액트에서는 별도의 컴포넌트(component)를 생성해서 관리합니다.
컴포넌트 유형
클래스형 컴포넌트
import { Component } from "react"; // 리액트 패키지의 컴포넌트 클래스를 가져오기
class ClassCom extends Component { // 클래스를 사용하기 위해서 상속
render() { // JSX
return( // 렌더링되는 부분 (보여지는 / 기능)
<div>
class component
</div>
)
}
}
export default ClassCom; ------> 사용할 파일에서 import ClassCom from './경로' 로 가져다 사용합니다.함수형 컴포넌트
import React from "react"; // 리액트 패키지에서 리액트 가져오기 // 17+ 리액트 이후부터는 선택적이지만 작성을 권장
function FuncCom() { // 함수형 컴포넌트를 정의
return ( // JSX
<div> // 렌더링 되는 부분
function component
</div>
)
}
// 모양은 일반함수와 동일하지만 JSX를 반환하기에 리액트에서 컴포넌트로 인식하고 동작합니다.
export default FuncCom;컴포넌트 사용
위에서 작성한 클래스/함수 형 컴포넌트는 사용할 파일에서 import 하여 사용가능합니다.
import ClassCom from './ClassCom';
import FuncCom from './FuncCom';
import TodoList from './TodoList';
function App() {
return (
<div className="container">
<TodoList></TodoList> // TodoList.tsx에서 작성한 컴포넌트
</div>
)
}
State
데이터의 상태를 관리/나타냅니다.
일반변수 대신 state를 사용하면 데이터를 동적으로 감시하여, 데이터가 변경되면 바로 화면에 반영할 때 사용합니다.
e.g. 변수의 값이 변경되도 변화가 발생하지는 않습니다. state 데이터가 변경되면 화면을 재렌더링하여 변경사항을 반영합니다.
import React, {useState} from 'react';
cost TodoList : React.FC = () => {
const Title : string = "할일";
const [todos] = useState('스터디', '시험', '휴식');
return(
<div>
<h1>{title}</h1>
<ul>
<li>{todos[0]}</li> ---> 스터디
<li>{todos[1]}</li> ---> 시험
</ul>
</div>
)
state 의 값을 변경
const [state값, state를 변경하는 함수] = useState(기본값);시계 컴포넌트
현재시간을 가져와 표시하는 것을 1초 간격 마다 반복하며, 실시간 시간을 보여주는 컴포넌트.
import { useState } from 'react';
const Clock : React.FC = () => {
const [time, setTime] = useState(new Date());
setInterval(()=>{
setTime(new Date());
}, 1000);
return (
<div>
<h2>현재 시간 : {time.toLocaleTimeString()}</h2>
</div>
)
}
export default Clock;기타
할일 추가에서 스프레드 연산자(...)를 사용하는 이유
const addTodo = () => {
if(newTodo.trim() !== ''){ // 공란확인
setTodos([...todos, {id : Date.now(), text : newTodo, isChecked : false}]);
setNewTodo(''); // 추가 후 문자열 비움
}
}원본 데이터를 유지하면서 배열의 새로운 복사본을 만들고 (= 독립적인 메모리 공간의 생성) 새로운 주소값에서 값을 추가하는 것이 안정적이므로 ... 를 사용하는 것 // 원본 데이터를 직접적으로 변경하지 않음
...Todo에서 기존 배열을 복사{id: ~~ }에서 새 배열(할 일)이 추가됩니다.
-> state에서 변경이 발생(업데이트)되므로 새로 렌더링합니다.
ts로 todolist를 실습해보면서, 강의를 들으면서 실습할 때는 이해되었다고 생각한 부분들도. 다시 혼자 복습하는 과정에서 애매하거나 막히는 부분이 상당히 있었는데, map, filter, trim 같은 문법들과, state의 사용에 대해 보충이 필요함.
