차근차근 배움터

중첩 속성을 useEffect에 종속성으로 추가하기 이전 강의에서 우리는 useEffect()에 객체 속성을 종속성으로 추가하기 위해 dstructuring을 사용했습니다. const { someProperty } = someObject; useEffect(() => { // code that only uses someProperty ... }, [someProperty]); 이것은 매우 일반적인 패턴 및 접근 방식이며, 이것이 제가 일반적으로 이 방식을 사용하는 이유이며 여기서 보여드리는 이유입니다(코스 내내 계속 사용할 것입니다). 핵심은 우리가 destructuring을 사용한다는 것이 아니라, 전체 개체 대신 특정 속성을 종속성으로 전달한다는 것입니다. 우리는 이와 같이 코드를 작성할 수도 있으며..

이렇게 만든 것에서 form 유효성 검사하는 부분이 여전히 state 이기 때문에 스케줄링과 관련한 이슈 때문에 아주 좋은 코드라고 하기는 어렵다 그래서 여기서 주석 처리 했던 useEffect를 사용할 수 있는데 여기서 나타나는 문제는 useEffect부분의 함수가 너무 자주 일어난다는 것이다. . emailState 또는 passwordState가 변경될 때마다 실행된다 이미 유효성 검사를 통과한 상태에서 문자 하나를 더 추가하는 경우는 굳이 다시 확인할 필요가 없다. Object Distructuring Array Distructuring 과 유사하다 객체의 특정 속성을 추출하는 것이다. Alias Assignment 별칭 할당이라고 해서 아래와 같이 isValid라는 것을 emailState 객체..

이 강의는 못 알아듣겠다! 이해가 안돼서 생활 코딩의 힘을 빌리기 useState의 경우는 고객이 직접 장부에 기록하는 법을 알아서 실행하는 것이다 useReducer의 경우는 고객이 직접 작성하지 않고 주문을 한다 첫번째 인자는 회계직원 즉 함수, 두번째 인자는 초기값 일반적으로 useState를 사용할 때 import React from 'react'; import './style.css'; import { useState, useReducer } from 'react'; export default function App() { const [val, setVal] = useState(0); const valDown = () => { setVal(val - 1); }; const valUp = () =..

state를 관리할 때 사용한다 특히 복잡한 state 예를 들면 다른 측면에서 똑같은 state를 관리하는 경우가 생긴다 state가 update를 scheduling 하는 방식 때문에 아래와 같은 방식의 코드는 문제가 생길 수 있다 그래서 함수 형태를 사용하는 것이 좋은데 여기에서는 사용할 수 없다. 왜냐하면 두 개의 다른 state에 의존하고 있기 때문에 또 이 폼 유효성 state의 가장 최근 스냅샷이 아니라서 사용할 수 없다 state 업데이트가 이전 state에 의존하는 경우에 사용한다는 규칙

강의 대본 useEffect는 useState 외에 가장 중요한 리액트 훅입니다 따라서 확실히 이해해야 합니다 따라서 다시 한 번 분명히 말씀드리겠습니다 언제 useEffect의 어떤 부분이 시작되고 실행되는지에 대해서요 이를 위해 다시 여기 Login 컴포넌트에서 새로운 useEffect 호출을 추가하겠습니다 여기에는 첫 번째 인수만 추가합니다 즉, 지금은 두 번째 인수는 없습니다 여기에서 "이펙트 실행"이라는 로그를 기록해 봅시다 지금은 의존성에 대한 정보는 없습니다 이 첫 번째 인수만 있죠 이렇게 사용해도 됩니다 물론 이펙트를 이런 식으로는 거의 사용하진 않지만요 그 이유는 새로고침하면 컴포넌트가 처음 마운트되었을 때 실행되는 것을 볼 수 있습니다 즉 이 로그인 컴포넌트가 처음으로 렌더링될 때죠 또..

로그인 시에 글자를 입력할 때마다 유효성 검사를 하는 경우는 불필요할 수도 있다. 예를 보면 간단하게 진행되기 때문에 괜찮은 것 같지만 예를 들면 http 요청을 통해서 데이터가 존재하는 지 확인한다고 했을 때는 입력이 끝난 경우에 한 번씩만 실행하는 것이 네트워크 트래픽에 부담을 주지 않는 일이기 때문이다. 디바운싱(Debouncing)이라는 개념이 등장하는데 사용자가 입력을 멈췄을 때 유효성 검사를 실시하는 것과 같은 경우를 말한다. 익명의 함수를 반환하는 클린업 함수를 사용해보자 모든 새로운 사이드이펙트 함수가 실행되기 전에 클린업 함수가 실행된다 useEffect(() => { const identifier = setTimeout(() => { setFormIsValid( enteredEmail...

이전 강의에서 useEffect() 종속성에 대해 살펴보았습니다. effect 함수에서 사용하는 "모든 것"을 종속성으로 추가해야 함을 배웠습니다. 즉, 거기에서 사용하는 모든 상태 변수와 함수를 포함합니다. 맞는 말이지만 몇 가지 예외가 있습니다. 다음 사항을 알고 있어야 합니다. 여러분은 상태 업데이트 기능을 추가할 필요가 없습니다. (지난 강의에서 했던 것처럼 setFormIsValid 사용): React는 해당 함수가 절대 변경되지 않도록 보장하므로 종속성으로 추가할 필요가 없습니다. 여러분은 또한 "내장" API 또는 함수를 추가할 필요가 없습니다 fetch(), 나 localStorage 같은 것들 말이죠 (브라우저에 내장된 함수 및 기능, 따라서 전역적으로 사용 가능): 이러한 브라우저 AP..

useEffect는 sideEffect를 처리하기 위해서 존재한다 sideEffect는 보통 http request 등을 말한다 키 입력을 listen 하고 저장하는 것 또한 sideEffect이다 유효성 검사 역시 그 중 하나이다 useEffect는 일반적으로 매우 중요한 훅으로, 무언가에 대한 응답으로 실행되는 코드를 다루는 데 도움이 된다 그 무언가는 로드되는 컴포넌트일 수도 있고, 업데이트되는 이메일 주소일 수도 있다 무엇이든 될 수 있습니다, 어떤 액션에 대한 응답으로 실행되는 액션이 있다면 그것이 사이드 이펙트(Side Effect)이다 useEffect(() => { setFormIsValid( enteredEmail.includes('@') && enteredPassword.trim().l..

선생님이 올려주신 프로젝트를 다운로드 받고 login 할 때 아래 코드도 실행되게끔 작성한다 브라우저에 내장된 localStorage를 이용하는 것이다 localStorage.setItem('isLoggedIn', '1'); 그러나 아래의 코드에는 문제가 한 가지 있다 바로 localStorage에서 isLoggedIn 정보를 가져오고 setIsLoggedIn 가 실행되는 순간 App.js 가 다시 실행되고 그럼 또 다시 localStorage 정보를 받아오는 그런 무한 루프가 발생한다 그래서 이러한 경우에 useEffect를 사용할 수 있다 import React, { useState } from 'react'; import Login from './components/Login/Login'; impo..

가끔 http request를 요청하는 것과 같은 프로세스를 처리하다가 무한루프로 빠지는 경우가 생길 수 있다 side effect를 처리하는 적절한 Hook이 필요하다 이 useEffect를 사용하는 경우에는 다시 렌더링될 때 컴포넌트가 실행되지 않는다. 그렇다면 언제 실행 되느냐? 두 번째 인자로 넣었던 dependencies 이 의존성이 변경된 경우에만 실행될 것이다