💡 state가 array 또는 object 자료일 경우
📌 현재 코드 확장 개선
- spread 문법
...은 배열의 새로운 복사본을 만들고 무장해제하라는 뜻.- spread 연산자를 이용하면 새로운 메모리를 생성해서 사본을 만듦 (새로운 주소값을 가리킴)
- 이것을 이해하려면 참조형에 대해 이해해야 한다.
- 독립적인 메모리 공간이 생김.
🔗 얕은 복사
let a = [1, 2, 3];
let b = a;
console.log(a === b);
// true 나옴.
// 이 둘은 주소값이 같음🔗 깊은 복사
let c = [...a];
console.log(a === c);
// false 나옴
// 이 둘은 주소값이 다름주소값을 복사하는 것이 아니라 각각 다른 메모리에 저장함.
💡 새 할 일 추가하기 (feat. 리액트 부트스트랩)
📌 입력창 만들기
<div>
<input type='text'
placeholder='할 일 입력'
style={{
marginRight : '10px',
writingMode : 'horizontal-tb'
}}
/>
<button>추가</button>
</div>
이런 식으로 입력 창이 만들어짐.
버튼을 꾸미기 위해 React Bootstrap을 이용할 것임
https://react-bootstrap.netlify.app/
📌 버튼 꾸미기
Visual Studio Code 터미널에 아래 명령을 입력한다
npm install react-bootstrap bootstrap
import { Button } from 'react-bootstrap';설치가 완료되면 Button을 import 해줌.
<Button variant='warning'>추가</Button>이렇게 버튼을 추가해주면 다음과 같이 예쁜 버튼이 나옴.
텍스트 창도 보기 좋게 바꿀 수 있음.
const addTodo = () => {
if (newTodo.trim() !== '') {
setTodos([...todos, { id : Date.now(), text : newTodo, isChecked:false}]);
setNewTodo('');
}
}
//...
<div>
<input type='text'
placeholder='할 일 입력'
style={{
marginRight : '10px',
writingMode : 'horizontal-tb'
}}
value = {newTodo}
onChange={(e)=> setNewTodo(e.target.value)}
/>
<Button variant='warning' onClick={addTodo}>추가</Button>
</div>새 할 일을 입력한 후 버튼을 누르면 추가되는 기능
💡 시계 추가하기
📌 자바스크립트 타이머
setInterval(콜백함수, 시간주기(밀리세컨드));위와 같이 설정함
import { useState } from "react";
const Timer : React.FC = () => {
const [seconds, setSeconds] = useState<number>(0);
return (
<div>
<h2>타이머 : {seconds}초</h2>
<button onClick={
function()
{
setInterval(()=>{
setSeconds((prev) => prev + 1);
}, 1000)
}
}>시작</button>
</div>
)
}
export default Timer;
App.tsx에 위의 코드를 import 해주면
1초씩 초가 늘어나는 타이머 추가 완료!
📌 현재 시간 추가하기
const Clock : React.FC = () => {
const [time, setTime] = useState(new Date());
setInterval(() => {
setTime(new Date());
}, 1000);
return (
<div>
현재 시간 : {time.toLocaleTimeString()}
</div>
)
}
현재 시간이 표시된다.
💡 추가 기능 구현
📌 할 일 삭제하기
const [todos, setTodos] = useState<Todo[]>([
{id : 1, text : '공부하기', isChecked : false},
{id : 2, text : '잠자기', isChecked : false},
{id : 3, text : '미팅하기', isChecked : false}
]);
const removeTodo = (id : number) => {
setTodos(todos.filter((todo)=> todo.id !== id))
}
//...생략
<button
onClick={()=> removeTodo(todo.id)}
className='delbutton'
>삭제</button>
함수를 추가하여 삭제 버튼을 누르면 해당 할 일을 삭제하는 기능 추가
📌 props
- 특정 데이터를 사용할 때 component들끼리 공유해야 되는 상황이 생김
- component에서 데이터를 넘길 때 props라는 개념으로 넘겨주면 됨
- 일반 함수에서 매개변수와 같은 개념임
- props를 사용하게 되면 데이터가 고정되어 있지 않고 입력값에 따라 결과가 동적으로 변하게 됨
- 변화가 필요한 데이터에 대해서는 props를 사용하는 것이 좋음
import React from 'react';
import { Component } from "react";
interface MyProps {
weather : string;
children : React.ReactNode;
}
// const MyWeather : React.FC<MyProps> = ({children, weather}) => {
// return (
// <div>
// {children}<p />
// 오늘의 날씨는 {weather} 입니다.
// </div>
// )
// }
class MyWeather extends Component<MyProps> {
render() {
const {children, weather} = this.props;
return (
<div>
{children}<p />
오늘의 날씨는 {weather} 입니다.
</div>
)
}
}
export default MyWeather; 함수형 컴포넌트와 클래스형 컴포넌트에서의 props 사용
function App() {
return (
<div className="container">
<MyWeather weather='맑음'>일기예보</MyWeather>
</div>
);
}메인 함수에 위와 같이 사용해주면 동적으로 처리 가능
//props 구조 분해 할당
const {children, weather} = props;
📌 글자를 선택하면 상세정보 구현 함수
const[showDetail, setShowDetail] = useState<boolean>(false);
const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);
const handleTodoClick = (todo : Todo) => {
setShowDetail(true);
setSelectedTodo(todo);
}
const handleCloseDetail = () => {
setShowDetail(false);
}상세정보를 노출시키기 위한 함수 구현
📌 모달 대화상자를 이용한 상세정보 구현
const TodoModal : React.FC<TodoModalProps> = ({show, todo, handleClose}) => {
return (
<div>
<Modal show={show} onHide={handleClose} centered>
<Modal.Header closeButton>
<Modal.Title>Todo 상세 정보</Modal.Title>
</Modal.Header>
<Modal.Body>{todo?.text}</Modal.Body>
</Modal>
</div>
)
}리액트 부트스트랩의 modal 구현 코드를 참고하여 변경하여 사용한다.
💡 프론트엔드 기초과정을 마치며
📌 프론트엔드 공부 방향
- 클론 코딩 위주의 학습보다는 프로그래밍 기초 개념 및 원리 이해 중심으로 학습하기
- 개발은 기술 하나 하나를 습득하는 것보다는 패턴을 이용하는 것이 중요함
- HTML, CSS와 같은 UI 디자인도 중요하지만, 그보다는 로직과 기능 구현에 집중하기
- 객체 지향 철학에 늘 관심 가지기. 모든 분야의 개발 기반은 대부분 객체 지향 기반임
- 우리의 목표는 프론트엔드 개발자나 웹 개발자보다는 그냥 개발자가 되는 것임
