파이썬 내가이겨

📌 1. Modal 컴포넌트란?**모달(Modal)**은 사용자 인터페이스에서 자주 사용되는 오버레이 UI 컴포넌트로, 특정 작업을 수행하거나 알림을 보여줄 때 현재 페이지 위에 뜨는 창입니다.✅ 왜 사용하는가?사용자의 집중을 유도하고,백그라운드 요소와의 상호작용을 차단하며,중요한 작업(수정, 삭제 등)에 대해 의사결정을 명확하게 하도록 돕기 위함입니다.✅ 구성 요소배경 오버레이: 클릭 시 모달 닫기 기능을 할 수 있음내용 영역(Content Box): 제목, 폼, 버튼 등 포함닫기 버튼: X 또는 외부 클릭✨ 2. Modal 동작 방식상태 관리React에서는 보통 useState 훅을 통해 **열림/닫힘 상태 (isOpen)**를 관리합니다.true: 모달 열림false: 모달 닫힘tsx복사편집con..

Board List: 전체 보드 목록을 보여주는 컴포넌트.SideForm: 새로운 보드를 추가하는 입력창 (사이드바 형식).List / ListContainer: 각 보드 안의 리스트를 감싸는 구조.Task: 리스트 안에 들어가는 개별 할 일(Task) 단위.ActionButton: ‘+’ 버튼 같은 사용자 액션용 버튼.DropDownForm: 리스트/태스크 추가용 드롭다운 폼.Style 적용: styled-components 또는 CSS Module로 각각 따로 스타일링.

프로젝트 초기 설정 및 폴더방법 1$ npx create-react-app 방법2npm init viteProject name: ./Select a framework: > React //리액트 선택 Select a variant: > TypeScript //타입스크립트 선택npm i>>생성 완료시작하기 //package.json파일에 debug파트에 "dev라고 되어 있음" "scripts": { "dev": "vite", //터미널npm run dev 구조 생성src 폴더 구조 안내src 폴더 구조 설명src 폴더 안에는 다음과 같은 하위 폴더들을 만든다:화면을 구성하는 모든 UI 컴포넌트를 모아두는 공간이다.이 폴더에는 다음과 같은 주요 컴포넌트를 넣는다:ActionButton..

props : 컴포넌트 간에 데이터를 넘길때 사용 //MyWeather.tsximport React from 'react';interface MyProps { weather: string;}const MyWeather: React.FC = (props) => { return ( 오늘의 날씨는 {props.weather}입니다. );};export default MyWeather; //App.tsximport './App.css';import Todolist from './Todolist';import Clock from './Timer';import MyWeather from './MyWeather';function App() { let ..

클래스형 컴포넌트//ClassComimport { Component } from "react";class ClassCom extends Component { render() { return ( 클래스형 컴포넌트 ); }}export default ClassCom;extends는 상속받는다 라는 의미 : Component라는 클래스로부터 상속을 받겠다 사용 방법 : Component를 extends해야 하고, render()를 호출마지막엔 export문을 사용 후 불러오는 파일엔 import를 사용함수형 컴포넌트//FuncCom.tsximport React from 'react';function Fun..

리액트React.js는 자바스크립트 라이브러리의 하나임.사용자 인터페이스를 만들기 위해 페이스북(조던 워크)에서 개발싱글 페이지 어플리케이션 및 모바일 어플리케이션 개발 가능2011년 페이스북의 뉴스피드에 처음 적용, 2012년 인스타그램 닷컴에 적용2013년 발표, 오픈소스화리액트 시작npx create-react-app my-app 타입스크립트를 사용npx create-react-app todolist --template typescript이런식으로 js파일이 tsx로 생성된다. jsx문법tsx파일은 html 컴포넌트를 사용할 수 있는 ts의 확장된 파일function App() { return ( Hello React! );} css연동하기//App.tsximport R..