차근차근 배움터

1) 훅은 리액트 함수 컴포넌트 또는 사용자 정의 훅에서만 사용할 수 있다 "리액트 훅 useState는 emailReducer 함수에서 호출된다, 이 함수는 리액트 함수 컴포넌트도 아니고 사용자 정의 리액트 훅 함수도 아니다" 2) 리액트 훅은 리액트 컴포넌트 함수 또는 사용자 정의 훅 함수의 최상위 수준에서만 호출해야 한다는 겁니다 ＃중첩 함수에서 훅을 호출하지 말라 ＃block 문에서 호출하지 말라 "리액트 훅 useContext는 콜백 내부에서 호출할 수 없습니다, 리액트 훅은 리액트 함수 컴포넌트 또는 사용자 정의 리액트 훅 함수 안에서 호출되어야 합니다, 그리고 최상위 수준에서 직접 호출되어야 합니다."

버튼에 context를 주게 되면 다른 용도로 재사용 가능한 버튼의 기능이 하나로 고정되는 문제가 발생한다. 또 변경이 잦은 경우 context가 적합하지 않을 수 있다 1초에 여러 번 바뀌는 그런 경우에는 context가 적합하지 않다 그러면 이제 앱 전체에 걸쳐 또는 컴포넌트 전체에 걸쳐 state가 자주 변경되는 경우엔 어떻게 해야 할까? 그런 경우에도 컨텍스트를 사용하고 싶은데 프롭(props)은 적합하지 않고 그렇게 하면 안될 때 등장한 것이 바로 "리덕스"이다.

그리고 별도의 컨텍스트 관리 컴포넌트를 만들고 싶다고 해보자 더 많은 로직을 가져오고 싶다면 import React, { useState } from 'react'; const AuthContext = React.createContext({ isLoggedIn: false, onLogout: () => { }, onLogin: (email, password) => { } }); export const AuthContextProvider = (props) => { const [isLoggedIn, setIsLoggedIn] = useState(false); const logoutHandler = () => { setIsLoggedIn(false); } const loginHandler = () => { s..

문자열이나 객체의 값을 전달할 수 없지만 함수는 전달할 수 있다. 컴포넌트 전체에 걸쳐서 context를 이용할 수 있다 state를 관리하고 state를 변경하는 함수를 관리하기 위해서 이제 컨텍스트를 사용하는 좋은 예를 보여드리겠습니다 여기 main 섹션에서는 여전히 onLogout을 통해 logoutHandler를 전달합니다 onLogin을 통해서는 loginHandler를 전달하죠 왜냐하면 이 핸들러들을 로그인 및 홈 컴포넌트에서 직접 사용하기 때문입니다 Login 컴포넌트에서 props.onLogin을 직접 참조하는 것을 볼 수 있습니다 전달하는 게 아니죠 여기서 사용하고 있습니다 Home 컴포넌트에서도 동일합니다 onLogout을 직접 사용하고 있습니다 엄밀히 말하자면, 버튼 컴포넌트에 전달하..

내장함수인 useContext를 선언하고 내부에 AuthContext 컨텍스트에 포인터를 전달한다. 그리고 ctx 변수를 선언해 담으면 더 깔끔하게 코드를 작성할 수 있다! import React, { useContext } from 'react'; import classes from './Navigation.module.css'; import AuthContext from '../store/auth-context'; const Navigation = (props) => { const ctx = useContext(AuthContext); return ( {ctx.isLoggedIn && ( Users )} {ctx.isLoggedIn && ( Admin )} {ctx.isLoggedIn && ( Log..

리액트에는 컨텍스트(Context)라는 개념이 있는데 리액트 내부적으로 prop chain을 구축하지 않아도 pstate를 관리할 수 있게 하는 기능을 갖고 있다. components 폴더 내에 store 폴더 생성 후에 auth-context.js 파일을 생성한다 (컴포넌트를 생성할 것이 아니기 때문에 파스칼 용법으로 이름을 작성하지 않음) 리액트에서 createContext를 호출한다 // React.createContext() 이름 그대로 Context를 생성한다. 그리고 흥미롭게도 컴포넌트나 객체가 될 것이다. 컴포넌트를 포함할 객체이기 때문에 이렇게 이름을 지었다. import React from 'react'; const AuthContext = React.createContext({ isLo..

일반적으로 데이터는 프롭을 통해 컴포넌트에 전달됩니다 하지만 항상 문제가 되는 건, state를 여러 컴포넌트를 통해 전달하는 경우입니다 즉 기본적으로는 프롭을 활용하여 다른 컴포넌트에 데이터를 전달합니다 여기는 아주 간단한 앱입니다 하지만 여기에서조차도 데이터를 MainHeader를 통해 Navigation 컴포넌트로 보내고 있죠 MainHeader에서 받는 프롭에서요 데이터가 실제로 필요하지 않더라도요 따라서 더 큰 앱에서는 이러한 프롭 체인이 만들어지기 쉽습니다 데이터를 컴포넌트를 통해 다른 컴포넌트에 전달하려고요 이렇게 할 수도 있습니다, 이게 딱히 나쁜 것도 아니에요 하지만 앱이 커질수록 이렇게 하면 불편해집니다 따라서 이렇게 하는, 대신 프롭을 실제로 필요한 데이터를 부모로부터 받는 컴포넌트에..

언제 useReducer를 사용하는 지 알 수 있을까? 1) useState를 번거롭게 너무 많이 사용하게 될 경우 관련 state 스냅샷들이 서로 독립적이고 같이 업데이트가 잘 안되다면, 그 경우에는 useReducer를 사용하고 싶게 될 것이다 대본 useReducer에 대해 배웠보았습니다 useState를 반드시 사용해야하는 건 언제인지, useReducer를 사용하는 것이 좋을 때는 언제인지 다시 정리해 봅시다 여러분은 일반적으로 useReducer가 언제 필요한 지 알게 될 것입니다 항상 적용되는 규칙은 아닐 수도 있습니다 하지만 언제 useReducer가 필요할 지 알게 될 겁니다 예를 들어 useState를 사용하면 너무 번거로운 경우죠 너무 많은 일들을 처리해야 하는 경우죠 관련 state..

중첩 속성을 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 객체..