goshek 님의 블로그

import React, { useState } from "react";import { json } from "stream/consumers";/*    ! useState를 사용한 다양한 타입 상태 관리    숫자, 문자, 논리, 객체, 배열*/interface IUser {  id: number;  name: string;}export default function UseState05() {  const [count, setCount] = useStatenumber>(0);  const [name, setName] = useStatestring>("");  const [isVisible, setIsVisible] = useStateboolean>(false);  const [user, setUser]..

import React, { useState } from "react";/*! useState를 사용한 이벤트 처리 & 상태 관리? 요구 사항 정리1. 폼 필드: 사용자 아이디, 비밀번호, 이메일 주소 입력 (문자열 데이터)2. 입력 유효성 검사: 모든 필드 입력창은 비워져 있을 수 X3. 상태 관리: 입력값은 객체로 하나의 useState를 통해 상태 관리 (formData)4. 폼 제출: 폼 제출 시 모든 입력 값이 콘솔에 출력 (객체 자체를 출력)>> 입력 조건을 만족하지 않는 경우(유효성 검사 불일치 시) - 오류 메시지 출력>> 오류 메시지 관리도 컴포넌트 내에서 상태 관리*//*! 작업 순서- 폼과 필요한 입력 필드 생성- 입력 필드에 대한 상태 관리 로직 (onChange)- 입력 유효성 검..

import React, { useState } from "react";/*    ! React 이벤트 객체의 타입 정의    == 이벤트 타입 ==    : 이벤트 종류에 따라 다르게 표현    EX) 입력 필드에 대한 변경 이벤트: React.ChangeEvent    EX) 폼 제출 이벤트: React.FormEvent    >> 해당 이벤트를 사용하는 핸들러 로직에는 폼제출의 기본 동작 방지     e.prventDefault()    EX) 클릭 이벤트: React.ClickEvent    EX) 키보드 이벤트: React.KeyboardEvent    EX) 마우스 이벤트: React.MouseEvent */export default function UseState03() {  const [c..

import React, { useState } from "react";/*    ! useState    : 컴포넌트 내에서 데이터에 대한 상태 관리    - 리액트의 이벤트 핸들러와 함께 사용    >> UI에서 발생하는 이벤트에 반응하여 상태를 변화    ! 여러 개의 입력 관리    >> 스프레드 연산자, 비구조화 할당*/const fruits = ["사과", "바나나", "망고"];const fruits2 = [...fruits];const person = {  name: "gwon",  age: 20,};const person1 = {  name: "pp",  age: 19,  like: "bear",};// ...(스프레드 연산자)에서 속성이 없었으면 추가, 있었다면 업데이트const per..

import React, { useState } from 'react'//! Hooks// : 리액트 "함수형 컴포넌트"에서 사용할 수 있는 기능// : use- 키워드로 시작// >> '여기서 해당 기능을 사용한다.'// EX) useState: 상태기능을 여기서 사용한다.// EX) useEffect: 부수효과기능을 여기서 사용한다./*! useState: React에서 제공하는 Hook 중 하나: 함수형 '컴포넌트' 내에서 상태를 관리하는 기능  (컴포넌트 단위에서의 상태 관리): useState 훅 호출 시  >> 변화되는 상태값과 해당 상태값을 업데이트하는 함수를 제공  >> 상태 업데이트 함수는 비동기적 처리가 기본으로 진행  >> 상태 변경 시 컴포넌트의 재렌더링을 유발*/export def..

import React, { useState } from 'react'// 자식 컴포넌트// : 부모 컴포넌트에서 사용되며 부모로부터 count 값을 전달받아 UI로 출력// >> p요소 내에 count 변수값을 작성export function ChildComponent({ count }: { count: number }) {  return (    p style={{ color: 'orange'}}>{count}p>  )}// 부모 컴포넌트// : counter UI 작성// >> 버튼 2가지를 생성하여 클릭 시 count 값이 변경//   : 변경된 count값은 자식 컴포넌트에게 전달export default function Handler02() {  const [count, setCount] = ..

import React from 'react'/*! React 이벤트 핸들러 (handle: 다루다): 사용자와의 상호작용을 처리하기 위한 함수- UI(사용자 인터페이스)에서 발생하는 이벤트에 반응하여  , 동작되는 기능을 정의*///# 이벤트 핸들러 예시// 버튼 클릭 시 >> console 창에 '버튼을 클릭하였습니다.' 출력//# 이벤트 핸들러에 데이터 전달interface ConsoleProps {  message: string;  children: React.ReactNode; // HTML 요소 + 사용자 정의 컴포넌트}// 자식 컴포넌트// >> 부모 컴포넌트에서 속성으로 문자열 message의 값과//    해당 컴포넌트 태그들 사이에 내용을 전달 받음function ConsoleButto..

import React from 'react'import index from '..';function Rendering02() {    const people=['a', 'b', 'c', 'd', 'e'];    const peopleDescription=[        {            id:0,            name: 'a',            job: 'student'        },        {            id:1,            name: 'b',            job: 'developer'        },        {            id:2,            name: 'c',            job: 'business'        }..

import React from 'react'/*    !렌더링    : 작성한 코드를 화면에 출력하는 기능    >> 조건부 렌더링*/// # 조건부 컴포넌트interface IItem{    /*        여행 짐싸기        >> 짐 항목의 이름, 준비 완료 여부    */   name: string;   isPacked: boolean; // 짐을 챙겼을 경우 (true) false}function Item({name, isPacked}: IItem){    // ! if 조건문을 사용한 조건부 렌더링    // if(isPacked){    //     return(    //         {name}😆    //     )    // }    // else{    //     ret..

import React from 'react'// # 자식 컴포넌트 // 화살표 함수를 사용한 컴포넌트 생성type User={    name: string;    age: string;    email: string;}/*    props 데이터는 변수, 객체든 상관없이 무조건 {}객체 내에 작성    : 객체의 데이터를 한 번에 받아오기 위해서는 본인의 {}객체 틀 외에 또 다른 {}객체*/type UserCardProps={user: User}const UserCard= ({user}: UserCardProps)=>{    console.log(user.age);    const {name, age, email}= user;    console.log(name);    return(        d..