한 걸음씩

▶ atom.tsx Recoil의 atom상태와 Selector를 정의하는 파일 Categories 열거형: 'TO_DO', 'DOING', 'DONE'의 카테고리를 나타내는 상수들을 정의한다. IToDo 인터페이스: 할 일에 대한 정보를 담는 객체의 형식을 정의한다. toDoState: Recoil의 atom으로서, 할 일 정보를 담는 배열을 관리한다. categoryState: 현재 선택된 카테고리를 관리한다. toDoSelector: 선택된 카테고리에 따라 필터링된 할 일 목록을 반환하는 Selector를 정의한다. // atom.tsx import { atom, selector } from 'recoil' // type categories = 'TO_DO' | 'DOING' | 'DONE' exp..

▷ useState를 사용한 Form import React, { useState } from 'react' const ToDoList = () => { const [toDo, setToDo] = useState('') // input창의 값을 toDo에 저장 const onChange = (event: React.FormEvent) => { const { currentTarget: { value }, } = event setToDo(value) } // 제출을 막기 const onSubmit = (event: React.FormEvent) => { event.preventDefault() console.log(toDo) // form이 input을 감싸고 있기 때문에 확인 가능 } return ( Ad..

npm i react-router-dom@6.4 ▷ React Router React 애플리케이션에서 클라이언트 측 라우팅을 처리하는 라이브러리 클라이언트 측 라우팅: 웹 애플리케이션에서 사용자가 페이지를 이동할 때 페이지 전체를 다시 로드하지 않고도 해당 페이지의 컴포넌트를 변경하여 페이지 전환을 처리하는 것을 의미 React 기반의 단일 페이지 애플리케이션(Single Page Application, SPA)에서 사용되며, 여러 개의 화면 뷰와 URL을 연결하여 애플리케이션의 다양한 상태를 관리할 수 있도록 도와준다. 이를 통해 사용자 경험을 향상하고 웹 애플리케이션을 더 동적으로 만들 수 있다 라우팅: URL에 따라 특정 컴포넌트를 렌더링하도록 지정할 수 있다. URL과 컴포넌트를 매핑하는 라우트 ..

1. Props ▷ Props PropTypes는 prop의 존재 여부를 알려주긴 하지만 코드가 실행된 이후에 알 수 있다 반면에, 타입스크립트는 코드가 실행되기 전에 오류를 확인할 수 있다 ▷ Optional Props 타입스크립트에서 컴포넌트의 속성 중 일부가 반드시 필요하지 않을 때 사용하는 기능 일부 속성이 있을 수도 있고 없을 수도 있으며, 필요에 따라 전달할 수 있는 속성 ▷ interface object shape(객체모양)을 타입스크립트에게 설명해 주는 타입스크립트의 개념 object가 어떤식으로 보일지 설명해 주는 것 // App.tsx import Circle from './Circle' function App() { return ( ) } export default App // Cir..

1. 컴포넌트, JSX ▷ 컴포넌트 UI를 구성하는 독립적이고 재사용 가능한 단위. UI를 구성 구성하는 작은 부분들을 컴포넌트로 나누어 개발하면 코드의 가독성과 유지보수성이 향상된다 ▷ JSX JavaScript XML의 약자로, 리액트에서 UI를 표현하는 데 사용되는 문법 JavaScript 코드 안에 XML과 비슷한 문법을 사용하여 UI 컴포넌트를 작성할 수 있도록 도와준다 JSX를 사용하면 UI 구조를 더 직관적이고 가독성 좋게 작성할 수 있고, 동적인 값을 쉽게 포함할 수 있다 컴포넌트 이름의 첫 글자는 대문자 css 스타일 사용법과 변수 사용법 import "./styles.css"; function App() { const name = "Tom"; const naver = { name: "네..