리액트 훅 2

React , useEffect / 컴포넌트의 시작 ,업데이트, 끝을 관리하자(생애 주기 관리)

컴포넌트의 생애주기 (LifeCycle) UI를 구성하기 위해서는 화면에 컴포넌트를시작(최초의 랜더링) ,  - Mounting값이 바뀌면 업데이트(리랜더링) , - Updating  삭제(또는 변경(즉 삭제후 새로운 시작))로 - Unmounting(unmounting 이후 새로운 Mounting)이루어 져있다.함수형 컴포넌트는 이의 생애주기마다 실행할 수 있는 훅이 존재한다. 바로 그 훅이 useEffect.최초 랜더링에만 이런 함수를 실행해줘 ,=> Mounting : 컴포넌트를 페이지에 처음 랜더링 할때  이 값만 바뀌었을때 이런 함수를 실행해줘, => Updating : State, Props 값이 바뀌거나 부모컴포넌트가 리랜더 하면서 자신도 리랜더 될때 이 컴포넌트가 없어질때 이런 함수를 실행..

Developer/React 2024.06.13

React, 이벤트 처리와 hook/ useState/useState를 활용한 객체 관리

React의 이벤트 처리1. 이벤트 리스너의 카멜 표기 (낙타 표기법)- onClick , onChange ...2. 콜백 함수 처럼 함수의 객체 참조 (주소값을 기술).3.기본 이벤트 제거할것.- a 링크 와 form 태그의 submit- 기본이벤트 제거 ( return false 대신 e.preventDefault() 명시적으로 호출해야함 )  HTML 의 클릭이벤트와 JSX의 클릭 이벤트 차이HTML의 클릭 이벤트 : onclick=clickTest();JSX의 클릭 이벤트 : onClick={clickTest}  콜백함수(banana)의 사용과 객체 참조형 함수(apple).    const clickTest = (e) =>{ alert(`안녕하세요 = ${e.target.nam..

Developer/React 2024.06.11
728x90