모각독 Study/7기 (4) 썸네일형 리스트형 [7주차] 한 입 크기로 잘라먹는 리액트 - useEffect(3) 4/21~4/27 컴포넌트의 마운트 제어 - 컴포넌트의 마운트 시점에 실행되는 코드 = 컴포넌트의 마운트 제어- useEffect에서 빈배열 [] 전달시, 컴포넌트의 마운트 시점에만 콜백 함수 실행 = 즉, 컴포넌트가 최초 마운트될 때 한 번만 실행되고, 이후 리렌더링이나 업데이트 시점에는 재실행되지 않음- useEffect에서 의존성 배열을 전달하지 않으면, 컴포넌트가 렌더링될 때마다 콜백 함수가 실행 즉, 최초 마운트 시점뿐 아니라 모든 업데이트마다 재실행 컴포넌트의 언마운트 제어- 언마운트: 라이프 사이클의 마지막단계 = 컴포넌트가 페이지에서 제거될 때- 클린업: 리액트 컴포넌튿의 언마운트 시점을 제어하려면, 클린업(Cleanup)기능 이해해야 함 클린업이.. [4주차] 한 입 크기로 잘라먹는 리액트 - useEffect(2) 3/31~4/6 여러개의 값 검사하기useEffect의 의존성 배열 요소가 여러 개 있고, 이 중 하나가 변경되어도 useEffect는 콜백 함수 실행import { useEffect, useState } from "react";(...)function App() { const [count, setCount] = useState(0); const [text, setText] = useState(""); const handleSetCount = (value) => { setCount(count + value); }; const handleChangeText = (e) => { setText(e.target.value);};useEffect(() => { console.log("coun.. [3주차] 한 입 크기로 잘라먹는 리액트 - useEffect 3/24~3/30사람 인생처럼 리액트 컴포넌트도 태어나고 사라지는 생애주기가 있음= 라이프사이클 라이프사이클은 3단계탄생: 마운트 - 컴포넌트를 페이지에 처음 렌더링할 때갱신: 업데이트 - State나 Props의 값이 바뀌거나 부모 컴포넌트가 리렌더 해 자신도 리렌더 될 때사망: 언마운트 - 더 이상 페이지에 컴포넌트를 렌더링하지 않을 때 라이프 사이클 제어 1. 컴포넌트가 처음 렌더링될 때 특정 동작을 하도록 만들거나,2. 업데이트할 때 적절한지 검사하거나,3. 페이지에서 사라질 때 메모리를 정리하는 등 = 리액트 훅의 하나인 함수 useEffect를 이용하면 이 사이클을 쉽게 제어할 수 있음 useEffect어떤 값이 변경될 때마다 특정 코드를 실행.. [1주차] 한 입 크기로 잘라먹는 리액트 - Ref 3/10~3/16Ref(Reference-참조)Ref를 이용하면 돔(DOM)요소를 직접 조작 가능 useRef사용하기useRef를 사용해서 Ref객체 생성대부분의 로그인페이지는 1. 사용자가 ID, PW를 입력하고 2. 로그인 버튼을 클릭하면 PW가 올바른지 점검3. 그 후, 패스워드 입력폼에서 작성한 값 초기화=> 리액트에서 Ref를 이용하면 이 동작들을 수행할 수 있다.import { useRef, useState } from "react";function Body() { const [text, setText] = useState(""); const textRef = useRef(); const handleOnChange = (e) => { setText(e.target.value);};c.. 이전 1 다음
