Hooks3 [React] useEffect 이 글은 별코딩강의를 기반으로 작성되었습니다! useEffect가 사용되는경우 1. mount (화면에 첫 렌더링) 2. update(다시 렌더링) 3. UnMount(화면에서 사라질때) 사용방식 1. 렌더링될때 useEffect의 사용방식에는 두가지 방식이 있음 //1 useEffect(() => { //작업 }); //2 useEffect(() => { //작업 },[value]); 1. 렌더링 될때 마다 콜백 실행 2. 화면에 첫 렌더링 될때 콜백 실행, value값이 바뀔떄 콜백 실행 (만약 빈배열을 준다면 컴포넌트가 제일 처음 렌더링 될때만 실행됨) 1-1. 실습!! import React, { useState, useEffect } from 'react'; import './style.css'.. 2022. 7. 29. [React] React Hooks - useState 실습 어제 수업시간에 배운 것과 리액트 훅스 시리즈를 토대로 useState의 간단한 예제를 만들어보았다. const [상태, set상태] = useState(초기값) useState는 상태가 변하면 다시 렌더링을 한다. 그래서 엄청 무거운 데이터의 경우 초기값에 값을 직접 넣어주거나 다른 변수로 선언한 뒤에 바로 전달하면 리렌더링을 할 때마다 렌더링을 할 때 마다 엄청무거운 초기값을 계속해서 불러와야한다. 무거운 데이터를 사용해야 한다면, 초기값에 무거운 데이터를 바로 전달하지 말고 화살표함수로 전달해주어야 한다. 이렇게 하면 처음에 페이지가 불러와졌을 때만 데이터를 불러오고 상태가변할때마다 데이터를 다시 불러오지 않아서 효율적이다. //BAD const heavyWork = () => { console.l.. 2022. 7. 27. [React] 간단한 사용자 입력 form 만들기 (useRef) 1. label태그의 htmlFor label 태그와 input요소를 사용해서 사용자 입력 폼을 만드는데, htmlFor이 나왔다. 잘 이해가 가지 않아서 공식문서를 살펴보니 다음과 같이 한 줄 나와있고 끝이었다. htmlFor: for는 JavaScript에서 예약어이므로 React 엘리먼트는 htmlFor를 대신 사용한다. label 요소에서 왜 for을 사용하는 거지.??!!! 처음에는 반복문인가..? 했는데 찾아보니 역시 다른 거였다. 간단한 label요소에 대한 설명은 다음 글을 참고했다. (1-1. HTML Tag, label for란?, 1-2 class와 for 속성 ) 1-1. js에서 label for 사용법! label요소의 for에는 input의 id와 같은 값을 넣어줘야한다. St.. 2022. 7. 26. 이전 1 다음
