2024년 11월 1일

✏️ props의 사용

• props : 어떤 특정 데이터를 사용할 때, 컴포넌트들끼리 공유해야하는 상황이 생길 때 props를 사용해서 정보를 넘겨줄 수 있다.

  • 일반 함수의 매개변수와 같은 개념이라고 생각하면 이해하기 쉬움
  • 컴포넌트에서는 데이터를 넘겨줄 때 사용하는 것
  • 타입스크립트에서 props를 사용할 때는 타입을 알려줘야함
  • this : 호출당하는 입장의 함수는 어떤 객체가 나를 호출 했는지 알아야함 → this 사용

// MyWeather.tsx

import React from 'react';
import { Component } from 'react';

interface MyProps {
  weather : string;
  children : React.ReatNode;
}

const MyWeather : React.FC<MyProps> = ({weatehr, children}) => {

	return(
		<div>
			{children}<p></p>
			오늘의 날씨는 {weather} 입니다.
		</div>
	)	
}
// 클래스형 컴포넌트
/*
class MyWeather extends Component<MyProps> {
	render(){
		const { children, weather } = this.props;
		return(
			<div>
				{children}<p></p>
				오늘의 날씨는 {weather} 입니다.
			</div>
		);
	}
}
*/ 
export default MyWeather;

// App.tsx

import Todolist from './Todolist';
import MyWeather from './MyWeather';


function App() {
  return (
    <div className='container'>
      <Todolist />
      <MyWeather weather='맑음'>일기예보</MyWeather>
    </div>
  );
}

export default App;

✏️ 모달 대화 상자를 이용한 상세정보 구현

// TodoModal.tsx

import React from 'react';
import { Modal } from 'react-bootstrap';

type Todo = {
  id : number;
  text : string;
  isChecked : boolean;
};

type TodoModalProps = {
  show : boolean;
  todo : Todo | null;
  handleClose : () => void;
}

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>
  );
}

export default TodoModal;

// Todolist.tsx

import React, { useState } from 'react';
import { Button } from 'react-bootstrap';
import TodoModal from './TodoModal';


type Todo = {
  id : number;
  text : string;
  isChecked : boolean;
};

const TodoList : React.FC = () => {
  const title : string = "오늘 할 일";

  // todos
  const [todos, setTodos] = useState<Todo[]>([
    {id: 1, text: '공부하기', isChecked: false},
    {id: 2, text: '잠자기', isChecked: false},
    {id: 3, text: '놀기', isChecked: false}
  ]);

  // newtodo
  const [newTodo, setNewTodo] = useState<string>('');

  // detailtodo
  const [showDetail, setShowDetail] = useState<boolean>(false);
  const [selectedTodo, setSelectedTodo] = useState<Todo | null>(null);

  // check item
  const handleCheckedChange = (itemId : number) => {
    setTodos((prevItems) => 
      prevItems.map((item) => item.id === itemId ? {...item, isChecked : !item.isChecked} : item)
    );
  }
  
  // addTodo
  const addTodo = () => {
    if(newTodo.trim() !== '') {
      setTodos([...todos, {id : Date.now(), text : newTodo, isChecked : false}]);
      setNewTodo('');
    }
  }
  // deleteTodo
  const deleteTodo = (id : number) => {
    setTodos(todos.filter((todo)=> todo.id !== id));
  }

  // show detailinfo
  const handleTodoClick = (todo : Todo) => {
    setShowDetail(true);
    setSelectedTodo(todo);
  }
  // close modal
  const handleCloseDetail = () => {
    setShowDetail(false);
  }
  return(
    <div>
      <h1>{title}</h1>
      <p></p>
      <div className='container'>
        <div>
          <input type="text" placeholder='할 일 입력' style={{marginRight: '10px', writingMode : 'horizontal-tb'}} onChange={(e) => setNewTodo(e.target.value)}/>
          <Button onClick={addTodo}>추가</Button>
        </div>
        <p></p>
        <div className='board'>
          <ul>
            {
              todos.map((todo, idx) => (
              <li key={todo.id}>
                <input type="checkbox" onChange={()=>{
                  handleCheckedChange(todo.id)
                }}></input>
                <span onClick={()=> handleTodoClick(todo)}>
                  {
                    todo.isChecked ? <del>{todo.text}</del> : <span>{todo.text}</span>
                  }
                </span>
                <button onClick={() => deleteTodo(todo.id)} className='delbutton'>삭제</button>
              </li>))
            }
          </ul>
        </div>
      </div>
      <TodoModal show={showDetail} todo={selectedTodo} handleClose={handleCloseDetail}></TodoModal>
    </div>
  );
}

export default TodoList;

✏️ 프론트엔드 기초과정을 마치며

• 클론 코딩 위주의 학습보다는 프로그래밍 기초 개념 및 원리 이해 중심으로 학습하세요
• 개발은 기술 하나하나를 습득하는 것보다는 패턴을 이해하는 것이 중요합니다
• HTML,CSS와 같은 UI 디자인도 중요하지만, 그보다는 로직과 기능 구현에 집중하세요
• 객체지향철학에 늘 관심을 가지세요. 모든 분야의 개발 기반은 대부분 객체지향 기반입니다
• 우리의 목표는 프론트엔드 개발자나 웹 개발자보다 그냥 개발자가 되는 것입니다

🍎🍏 오늘의 느낀점 : 프론트엔드 기초과정을 약 2주간 진행했다. 그리고 마지막 강사님의 말씀이 되게 와닿았다. 웹디자인과 퍼블리싱에 처음 입문하면서 웹사이트를 만드는 것이 즐겁고 뿌듯했고, 점점 욕심이 생기면서 프론트엔드 개발자가 되고 싶었다.
이 길에 들어서면서 처음 공부를 할 때 클론코딩들을 따라 하면서 설명하는 말들이 겉으로는 이해가 됐지만(강사님 말씀그대로 기술을 어떻게 써야하는지) 정말 그 속, 왜 이렇게 되는지는 이해가 되지 않았다. 그래서 방통대를 들어가서 처음 컴퓨터란 무엇인가부터 차근차근 개발에 대한 공부를 하고 나서야 여러 강의들이 이해되기 시작했다. c언어와 자료구조를 배운게 정말 큰 도움이 되는 것 같다. 설명하는 말들이 당연히 그렇게 되는구나 라고 이제는 잘 이해가 되고, 남들은 빨리 기술을 배워서 화려한 것들을 만들어내는데 그동안 이렇게 혼자 개념부터 차근차근 해온 것을 잘했다는 생각이 든다.
이게 또 비전공자와 전공자의 차이점이 아닌가 싶기도 하다. 개념 및 원리, 그리고 로직과 기능구현. 이것에 앞으로 집중하도록 해야겠다. 사실 맞는 말이다. 기초가 단단하면 어떤 것을 만들어내든 자신감이 있을테니깐.
그리고 타입스크립트 과정이 좀 짧았으니, 따로 더 깊이 공부해야겠다.
화이팅..!