YTCW

import React from 'react' // 렌더링// : 작성한 코드를 화면에 출력하는 기능// >> 조건부 렌더링 //# 자식 컴포넌트 interface IItem {  // 여행 짐 싸기  // >> 짐 항목의 이름, 준비 완료 여부  name: string;  isPacked: boolean; // 짐을 챙겼을 경우(true), 아직 안챙겼을 경우(false)} function Item({ name, isPacked }: IItem) {  // const example = { a: 1, b: 2, c: 3, d: 4 };   // const { a, b, c, d } = example;  // const a = example.a;  // const b = example.b;  // cons..

import React from 'react' // ! 리액트 라우터 // 페이지 이동 기능 //? 라우터란// 사용자가 요청한 url 에 따라 해당 url 에 맞는 페이지를 보여주는 것// react-router-dom 패키지 외부 라이브러리를 사용하여 라우팅을 구현//! 리액트 라우터 설치 방법// npm i react-router-dom //! 리액트 라우터 사용 방법// 1) 프로젝트에 라우터 기능을 적용// 프로젝트 최상단인 src/index.tsx 파일에서// BrowerRouter 를 적용// 자식 컴포넌트들이 라우팅 기능을 사용할 수 있도록 작성 // 2) Router// 여러 개의 Route 담을 수 있는 컴포넌트// 여러 개의 Route 중각각의 path(경로)에 일치하는 라우트 단 하..

import React from 'react' // 함수형 컴포넌트 snippets : rfc, rfce // # 화살표 함수를 사용한 자식 컴포넌트// - 부모로 부터 사용자에 대한 데이터를 props로 전달받아 ui 반환// >> props 는 반드시 객체의 형태 type User = {  name : string;  age : number;  email : string;}// props 데이터는 변수, 객체든 상관 없이 무조건 {} 객체 내에 작성// : 객체의 데이터를 한 번에 받아오기 위해서는 본인의 {} 객체 틀 외에 또 다른 {} 객체 틀로 묶어야 함 // const UserCard = ({name, age, email} : User) => {// 각각의 속성명을 변수로 사용 (구조분해할당)..

import React from 'react'import cat01 from "../../../assets/cat01.jpg" // rfc , rfce >> 함수형 컴포넌트 생성 // : 파일 명으로 컴포넌트 함수 생성 /*! 컴포넌트 (Component): 사용자 인터페이스(ui)를 구축하는 기본 요소 ? 컴포넌트 사용 방법1) 컴포넌트 내보내기 (export default) 2) 컴포넌트 가져오기: 불러오는 환경에서 상대경로를 지정>> 기존의 컴포넌트 함수명에서 변경 가능 (default) ? 특징1) 대문자로 시작 (upperCamelCase 사용): js의 일반 함수 형태와 구분>> rfc, rfce 스니펫 사용 시  - 파일명이 함수명으로 구현  - 각 폴더의 메인이 되는 파일 : index.t..