차근차근 배움터

이 강의는 못 알아듣겠다! 이해가 안돼서 생활 코딩의 힘을 빌리기 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..

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

섹션 10 고급 : 리듀서(Reducer)를 사용하여 부작용 처리 & 컨텍스트 API 사용하기 이펙트, 리듀서, 컨텍스트 이 기능들은 조금 고급 기능들로 기본 개념들을 배웠기 때문에 이제 이 개념들을 배울 수 있게 된 겁니다 이 기능들을 활용하면 더 복잡한 리액트 애플리케이션을 만들 수 있다 이 모듈에서는 어떤 이펙트가 있고 이펙트는 어떻게 사용하는지 사이드 이펙트, 즉 이펙트는 무엇인지 자세히 알아본다 리듀서가 있는 컴포넌트에서 복잡한 state를 관리하는 방법을 살펴본다 그리고 앱 수준 또는 컴포넌트 수준에서의 state 를 알아보겠다 즉, 컨텍스트라는 개념을 가지고 리액트에 내장된 여러 개의 컴포넌트에 영향을 주는 state에 대해 알아볼 것이다. 이것은 컴포넌트 간의 state 공유 및 state..

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/09-fragments-portals-refs 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.

지난 번에 ref를 이용한 파일을 완성 import "./UserForm.css"; import { useState, useRef } from 'react'; import Card from './UI/Card'; import Button from "./UI/Button"; import ErrorModal from "./UI/ErrorModal"; import Wrapper from '../Helpers/Wrapper'; const UserForm = (props) => { const nameInputRef = useRef(); const ageInputRef = useRef(); const [userName, setUserName] = useState(""); const [userAge, setUserA..