component

React

[React] component Life Cycle / useEffect를 통한 component Life Cycle 제어

Component Life Cycle리액트 컴포넌트의 라이프사이클은Mount -> Update -> Unmout로 진행된다.Mount : 컴포넌트가 최초에 렌더링 됨Update : 컴포넌트가 리렌더링 됨Unmount : 컴포넌트가 화면에서 제거 됨   useEffect를 통한 component Life Cycle 제어useEffect :   두 번째 인수인 [] 배열의 값이 바뀌면, 첫 번째 매개변수의 함수를 호출예) useEffect(() => { console.log(`count: ${count} / input ${input}`); }, [count, input]); // 의존성 배열, dependency array(deps)  예) 클릭을 홀수 번 할 때 없어지는 컴포넌트 App.jsxim..

React

[React] useRef로 component 내에 reference객체 생성

useRef vs useStateuseRefuseStateReference 객체를 생성State를 생성컴포넌트 내부의 변수로 활용 가능컴포넌트 내부의 변수로 활용 가능값이 바뀌어도 컵포넌트 리렌더링 발생하지 않음값이 바뀌면 컵포넌트 리렌더링 발생  사용 예)input tag에 DOM 요소를 reference 객체에 저장하여 input값이 빈 경우 focus 호출 import { useState, useRef } from "react";const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "", }); const countRef = useRef(0); ..

React

[React] Component & JSX

ComponentJavaScript에서 html을 리턴하는 함수함수의 첫 글자는 대문자로 작성해야 컴포넌트로 인식한다. vite를 통해 생성한 프로젝트를 실행시켰을 때 원리를 간단히 보면 1. index.html파일에서 main.jsx실행 2. main.jsx에서 App Component 렌더링 3. App Component(함수)는 html을 리턴   JSXJSX는 html과 JavaScript를 혼용해서 사용할 수 있도록 JavaScript를 eXtension한 것JSX 주의 사항1. 중괄호 내부에는 자바스크립트 표현식만 넣을 수 있다. {number %2 == 0 ? "짝수":"홀수"}2. 숫자, 문자열, 배열 값만 렌더링 된다. (객체는 오류 발생)3. 모든 태그는 닫혀있어야 한다.4. 최상위 ..

개발새발
'component' 태그의 글 목록