REACT7 훅의 규칙 (필수) 단순히 use로 시작하는 모든 함수입니다. useState, useEffect, useReducer, 커스텀 훅,... (필수) 리액트 훅은 리액트 컴포넌트 함수에서만 호출해야 합니다. const emailReducer = (state, action) => { useState() // 불가능! if (action.type === 'USER_INPUT') { return { value: action.val, isValid: action.val.includes('@') }; } if (action.type === 'INPUT_BLUR') { return { value: state.value, isValid: state.value.includes('@') }; } return { value: '', .. 2023. 3. 6. useContext 훅 리덕스의 사용과 마찬가지로 필요한 state를 연결하기 위해 무수한 props 연결이 발생할 경우 state를 전역에 저장하여 필요한 컴포넌트에서만 꺼내 쓸 수 있는 훅입니다. 일반적으로 props로 state를 연결하는 게 좋지만 특수한 한 역할만 수행하는 컴포넌트가 물리고 물려 깊이 자리 잡을 경우에는 useContext를 쓰는 것도 좋습니다. 변경이 잦은 경우에는 좋지 않고 아래의 예시의 로그인 상태 같이 state가 꽤 유지될 때 사용하기 좋습니다. state가 자주 변경될 땐 리덕스를 사용하는 게 좋습니다. useContext를 쓰기 이전에 다른 방법을 이용한 context 설정을 먼저 해보겠습니다. 먼저 전역으로 관리할 파일을 하나 만듭니다. auth-context.js import React.. 2023. 3. 3. useReducer 훅 useState와 비슷하게 상태를 관리하는 내장된 훅입니다. 여러 state가 같이 바뀌거나 서로 관련된 경우 useState를 이용할 경우 종종 사용 및 관리가 어려워지거나 오류가 발생하기 쉽습니다. 그러한 경우 useReducer로 대체해 볼 수 있습니다. setFormIsValid( event.target.value.includes('@') && enteredPassword.trim().length > 6 ) 이렇게 두 개의 다른 state를 기반으로 해서 다른 state를 갱신할 경우에 리액트의 state 업데이트 스케쥴링 방식에 의해 항상 최신의 state를 유지하기 힘듭니다. 이런 경우에 useReducer를 이용하여 함께 관리할 수 있는 좋은 예시가 됩니다. 기본적인 useReducer의 틀.. 2023. 3. 2. 커스텀 훅으로 HTTP 요청 리팩토링 이 글은 HTTP 요청 내용에서 이어집니다. https://iltae.tistory.com/2 HTTP 요청 보내기 HTTP 요청의 기본 개념 클라이언트에 직접적으로 서버를 연결하면 자바스크립트 코드는 누구나 확인할 수 있기 때문에 인증 정보를 노출시키는 행위이며 보안에 취약해집니다. HTTP 요청에 대한 A iltae.tistory.com 투 두 리스트를 예시로 HTTP 요청을 위한 커스텀 훅 구성을 먼저 해봅시다. use-http.js import { useState, useCallback } from "react"; const useHttp = () => { const [isLoading, setIsLoading] = useState(false); const [error, setError] = us.. 2023. 2. 17. 커스텀 훅(Custom Hook) 정규 함수 외에 안에 상태를 설정할 수 있는 로직을 포함한 함수를 의미합니다. 이는 로직 재사용이 가능한 메커니즘을 만드는 것이며 여러 컴퍼넌트에 뿌려도 로직은 공유하지만 상태를 공유하지는 않습니다. 지금까지 어떤 액체를 얼릴 때마다 트레이를 새로 만들었습니다. 하지만 커스텀 훅을 만드는 것은 하나의 얼음 트레이를 만들어 한 컴퍼넌트에선 물을 얼리고 다른 컴퍼넌트에선 오렌지 주스를 얼리는 방식과 비슷합니다. 초당 숫자가 1씩 올라가는 컴퍼넌트와 초당 숫자가 1씩 내려가는 컴퍼넌트를 만들고 생각해 봅시다. ForwardCounter.js import { useState, useEffect } from "react"; const ForwardCounter = () => { const [counter, set.. 2023. 2. 16. 리액트 최적화 테크닉 리액트가 동작하는 방식 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이며 컴포넌트를 사용하고 이에 대한 업데이트 역시 컴포넌트를 통해 합니다. 리액트는 웹을 모르고 브라우저와는 전혀 관계가 없습니다. 이는 어떻게 컴포넌트를 다루는지는 알고 있지만 이러한 컴포넌트에 HTML 요소들이 포함되어 있는지 아니면 아예 허구적인 요소들이 있는지에 대해서는 상관하지 않습니다. 화면에 표시해 주는 것은 리액트 DOM이 고려할 것들이며 컴포넌트의 재평가를 통해 차이점이 있을 경우에만 리렌더링을 하게 됩니다. 리액트 내에서 차이점을 가상으로 비교하는 건 메모리 안에서만 발생하기 때문에 간편하고 자원도 적게 듭니다. 하지만 실제 DOM을 변경하는 작업은 성능 부하가 많이 발생하기 때문에 최대한 그 차이점을 .. 2023. 2. 14. HTTP 요청 보내기 HTTP 요청의 기본 개념 클라이언트에 직접적으로 서버를 연결하면 자바스크립트 코드는 누구나 확인할 수 있기 때문에 인증 정보를 노출시키는 행위이며 보안에 취약해집니다. HTTP 요청에 대한 API를 말할 때는 보통 REST 또는 GraphQL API를 말하며 이 두 개는 서버가 데이터를 노출하는 방식에 대한 서로 다른 표준입니다. Fetch API는 브라우저 내장형이며 데이터를 불러오고 이름과는 다르게 전송도 가능합니다. 영화에 대한 정보를 불러와 그를 보여주는 간단한 코드 사용한 API 주소: https://swapi.dev/ SWAPI - The Star Wars API What is this? The Star Wars API, or "swapi" (Swah-pee) is the world's fi.. 2023. 2. 13. 이전 1 다음
