React.js/Hooks3 useState 1. 소개 useState는 React에서 제공하는 hook으로 컴포넌트의 상태를 생성하고 업데이트한다. useState – React The library for web and native user interfaces react.dev 2. 사용법 import { useState } from 'react'; function ExampleComponent() { const [count, setCount] = useState(0); return ( {count} setCount(count + 1)}> 증가 ); ); 사용법은 간단하다 배열로 선언해 주고 첫 번째 인자로 값을 읽고 두 번째 인자로 값을 업데이트한다. 3. Principles for structuring state 상태를 사용할 때 어떻게 상.. 2024. 2. 13. useEffect 1. 소개 import { useEffect } from 'react'; 리액트 컴포넌트가 렌더링 된 이후에 다양한 함수를 수행할 수 있도록 하는 Hooks이다. DOM 업데이트를 수행한 이후에 호출된다. 2. 실행 useEffect(() => { console.log('useEffect 실행'); return () => { console.log('clean up 실행'); } }, []); useEffect의 인자는 2개가 존재한다. 수행할 콜백 함수 의존성 배열 의존성 배열의 존재 유무, 의존성 배열 안에 변수 유무에 따라 수행하는 방식이 달라진다. return으로 함수를 반환하는 것을 cleanup 함수라고 한다. cleanup 함수는 컴포넌트의 언마운트시 실행된다. return을 안 쓰면 clea.. 2024. 1. 27. useRef 1. Issue React는 State가 변경될 때마다 렌더링 된다. input 값을 useState로 관리하면 불필요한 리렌더링이 발생한다. 이를 방지하고자 input 값을 useRef로 관리한다. 2. useRef useRef는 저장공간(변수 관리), DOM 요소에 접근하기 위해 사용되는 React Hooks이다. 3. Refactoring (Before) // auth.js import { useState } from "react"; import { Typography, Box, TextField, Button } from "@mui/material"; const Auth = () => { const [id, setId] = useState(""); const [password, setPasswor.. 2023. 1. 5. 이전 1 다음
