React - useEffect

1. 개요 useEffect를 사용해서 리액트의 생명주기를 확인할 수 있다. 리액트 컴포넌트의 생명주기는 총 3가지가 있다. Mount : 화면에서 나타 Update : 리렌더 Unmount : 화면에서 사라짐 2. 사용 방법 useEffect도 마찬가지로 리액트의 기능이기 때문에 state와 useRef 같이 import 해준다. import React , { useEffect } from "react"; useEffect의 기본 구성은 이렇게 나타난다. useEffect(()=>{ // Callback함수 }, []);// dependency Array(의존성 배열) // 이 배열안에 들어있는 값이 변화하면 콜백 함수가 실행됨 2-1 mount 할 때만 실행 컴포넌트가 화면에 처음 나타날 때를 mou..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms

React - useRef란?

1. 개요 자바스크립트에서 DOM요소를 선택하고 싶을때 getEelementById 나 querySelector를 사용하곤 한다. 리액트에서도 마찬가지로 DOM요소를 선택하고 싶을 때는 어떻게 할까? ✅ useRef를 사용하면 된다. 2. 사용 방법 import { useRef } from "react"; state를 사용할 때와 같이 리액트의 기능이기 때문에 import해준다. const authorInput = useRef(); const handleSubmit = () => { if (state.author.length < 1) { authorInput.current.focus(); return; } return ( ) 1. 원하는 DOM요소에 넣을 변수를 생성한다. → Ref로 생성 2. DOM요..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms

React - State란?

1. 개요 현재 리액트를 배우고 있는데 가장 기본이면서 중요한 개념인 state에 대해 개념이 잘 잡히지 않아서 기록할려고 적어본다. 내가 아는 선에서 정리한 것이므로 틀린부분이 존재할 수 있다. 개념을 배워가면서 수정하면서 기록할 예정이다. 2. 사용 방법 import { useState } from "react"; state를 사용하기 전에 먼저 리액트로부터 모듈을 import 해야 한다. const [state,setState] = useState(초기값) state : 현재 상태 setState : 현재 상태를 변화시키는 함수 useState : state의 초기값 3. 사용 예시 import { useState } from "react"; const [state,setState] = useSta..

• format_list_bulleted React
• · 2023. 5. 17.
• textsms