차근차근 배움터

이번에 보여줄 훅은 Input 컴포넌트와 명령형으로 상호 작용할 수 있게 해준다 즉, 예를 들어 어떤 state를 전달해서 그 컴포넌트에서 무언가를 변경하는 방식이 아니라 컴포넌트 내부에서 함수를 호출하는 방식으로 이용한다. 또 자주 할 필요도 없겠지만 자주 해서도 안 된다 이제는 Login 버튼을 활성화해서 유효하지 않은 값을 넣은 input 창에 효과를 주도록 하겠다. useRef에 대해서 기억하는가? 값이 유효하지 않을 때, 이 개념을 사용할 것이다 115. "ref"로 작업하기 ref는 매우 강력한 도구로 가장 기본적인 기능은 다른 DOM 요소에 접근해서 그것들로 작업할 수 있게 해주는 것이다 폼을 제출할 때만 필요한데도 키를 입력할 때마다 state를 업데이트한다는 건 ninetynine-202..

input div를 포함하는 컴포넌트 파일을 하나 생성하겠다 props를 통해 모든 데이터를 받는 컴포넌트다 버튼처럼 재사용 가능하게 만들 것이다 Input.js import React from 'react'; import classes from './input.module.css'; const Input = (props) => { return {props.label} } export default Input; Login.js 이렇게 보다시피 Input과 같은 버튼을 재사용할 때는 react context가 아닌 props를 사용해야 한다. import React, { useState, useEffect, useReducer, useContext } from 'react'; import Card from..

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..