팀프로젝트_기록일지/React_이정환_useState,useRef9 (5).이정환_react.js강의_ 프로젝트_실습1_카운터프로그램 만들기 내가 놓친 부분들 :●1_ App컴포넌트에 각 컴보넌트마다, section 태그로 감싸서, 공통적인 Css는 한방에 적용되도록 한다.●2_ App컴포넌트 맨 상위 태그를 div + className ="App" 으로 설정그러면 , App.css를 아래와 같이 기재한다.App>section { background-color: rgb(245, 245, 245); border: 1px solid rgb(240, 240, 240); border-radius: 5px; padding: 20px; margin-bottom: 10px;}●3_프로젝트 초기 셋팅의 CSS 중 알면 좋을 코드 :.body { padding: 20px; /*전체 컨텐츠의 브라우저 창 기준 약간의 여백*/}.App { marg.. 2025. 1. 15. (4).이정환_react.js강의_ React의 Hook의 정의, 규칙, 커스텀 훅 만들기 §1. Hook의 정의: 17년 이후에 틀딱들이 Class 컴포넌트가 class의 문법이 ㅈ같다는 이유를 버리고, React 개발팀들이 따로 개발한 Function 컴포넌트 기법예 : useState , useRef§2. Hook의 규칙 :규칙1_ Hook은 컴포넌트 내에서만 초기화되어야 한다.예시 코드 :import { useState } from "react";const [var , setVar] = useState(0);//오류남function HookExample(){ return( );}규칙2_ if() , for() , while() 문안에 Hook사용할 수 없다이유 : 이건 단순히 생각만 해보면, Hook은 렌더링과 관련되어있기에 , 렌더링을 for문 이지랄 나면 개꼬임▲규칙3_ .. 2025. 1. 14. (3).이정환_react.js강의_ 여러 state 변수들을 하나의 객체로 묶기 §1_ spread 문법 + 객체로 여러 useState 변수들을 간결화 정리● 예시 : Register.js 코드 변경 전,function Register() { const currentDate = formatDate(new Date()); const [name, setName] = useState("이름"); const [birth, setBirth] = useState(currentDate); const [country, setCountry] = useState(); const [introduce, setIntroduce] = useState(""); const onChangeNameInput = (event) => { setName(event.target.value); }; c.. 2025. 1. 14. (2).이정환_react.js강의_ 이벤트 핸들링에서 이벤트 객체 , 합성이벤트객체(작성중) 합성이벤트 객체 :어떤 짓거리 할 때, 등장하는 새끼? : 이벤트 핸들러 함수에서 이벤트 객체 사용시, 이때, 이벤트 객체가 합성객체(SyntheticBaseEvent)이다.예시 코드 :Button.jsfunction Button(props) { const { color = "purple", text, children } = props; const onClickButton = (event) => {//핸들러 console.log(event);//event를 출력해보라고 함 }; return ( //onClick 속성에 함수 대입 => 버튼 누를시, 핸들러 발생 {text} {children} );}export default Butt.. 2025. 1. 13. 이전 1 2 3 다음
