분류 전체보기268 (6).이정환_react.js강의_ React's LifeCycle과 역할, LifeCycle_Control방=>useEffect React's LifeCycle의 정의와 각 Cycle 단계마다 제어담당Mount -> Update(=ReRendering) -> UnMountReact's LifeCycle의 제어의 핵심은 useEffect로 다룬다.useEffect의 정의 :=> React에서 동작들에 따라 파생되는 효과 중 부작용을 제어하는 훅(Hook)이다.useEffect 실습하기1_ useEffect로 카운터 프로젝트에서 count값이 변경될때마다, console창에 count 값을 출력시켜보기- App.jsimport { useState, useEffect } from "react";//useEffect import 추가가import Controller from "./components/Controller";import Vi.. 2025. 1. 15. (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. 이전 1 ··· 5 6 7 8 9 10 11 ··· 67 다음
