분류 전체보기 (40) 썸네일형 리스트형 [React] Router , action, defer() 컴포넌트 파일에 (컴포넌트 내에 X) action 함수를 만든다.// action 함수도 리액트 라우터에 의해 실행 됨export async function action({params, request}){ const data = await request.formData(); const method = request.method; const e.. [React] router loader, useNavigation loader() 사용 loader() 사용 전import { useEffect, useState } from 'react';import EventsList from '../components/EventsList';function EventsPage() { const [isLoading, setIsLoading] = useState(false); const [fetchedEvents, setFetchedEvents] = useState(); const [error, setError] = useState(); useEffect(() => { async function fetchEvents() { setIsLoading(true); const res.. [React] router 멀티페이지 어플리케이션 단점 > 항상 새 콘텐츠를 가져와야 함 > 새로운 HTTP 요청을 전송하고 새로운 응답을 받는 과정에서 사용자의 흐름이 중단될 수도 있음 > 지연이 발생할 수 있음 > 사용자 경험 저하 > 복잡한 사용자 인터페이스 구축 시 싱글 페이지 어플리케이션 사용 SPA > 최초 HTML 요청 하나만 전송 > HTML 파일과 추가적인 JS 다운로드 되고 클라이언트에서 실행되는 추가 JS 코드는 사용자가 화면에서 보는 것들을 실제로 조절 SPA에서 라우팅사용 > 클라이언트 측에 리액트 코드 추가 가능하고 이것이 사용중이 URL을 감시 URL 이 변경될 떄마다 작동하여 URL 이 변경되면 화면에 다른 콘텐츠를 표시하게 됨 > 백엔드로부터 새 HTML 파일을 로딩하지 않고 약간의 클라이언트 측 코.. [React] Redux 리덕스 정의 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 애플리케이션에 있는 하나의 중앙 데이터(상태) 저장소 - 하나에 모든 데이터 상태 저장 *** 로컬 상태 : 하나의 컴포넌트에 연관된 상태값 크로스 컴포넌트 상태 : 다수의 컴포넌트에 미치는 상태값 (ex) Modal 여닫는 상태값, prop drilling prop chains 로 구현) 앱와이드상태 : 전체 앱에 영향을 주는 상태 ex) 사용자 인증, prop drilling prop chains 로 구현) 규칙 순수 함수 동기식 이어야 하며 부수 효과가 없어야 함(리듀서 안에서 부수효과 사용 불가) 리덕스 VS 리액트 컨텍스트 리액트 컨텍스트 단점 - 설정 복잡, 관리 복잡, 대형 애플리케이션에서 구축할 경우 중첩된 JSX .. [React] Form Validation check 1. validation 방법 1) 양식 제출 후 체크인 경우 (1) ref 사용 장점 : 코딩이 간결 단점 : 값 재설정이 어려움 import { useRef } from "react"; export default function Login() { const email = useRef(); const password = useRef(); function handleSubmit(event) { event.preventDefault(); const enteredEmail = email.current.value; const enteredPassword = password.current.value; } return ( Login Email Password Reset Login ); } event.prevent.. [React] Custom Hook 1. Hook 의 규칙 - 리액트 컴포넌트 내에서만 사용해야 함 - 중첩 함수 내에 있으면 안됨 2. Custom Hook 이 필요한 이유 - 컴포넌트 내 코드 간결화 - 커스텀 훅에서는 컴포넌트 밖의 함수 임에도 훅을 사용할 수 있다. - 작성한 함수를 다른 컴포넌트에서 재사용 가능하다. custom-hooks.js 커스텀 훅 import { useEffect, useState } from "react"; export function useFetch(fetchFn, initialValue) { const [isFetching, setIsFetching] = useState(); const [error, setError] = useState(); const [fetchedData, setFetchedDa.. [React] Http 연결, fetch 1. fetch 사용법 get 메서드 보내는 법 export default function Test(){ const [datas, setDatas] = useState([]); // 상태값을 업데이트 하고 있기 때문에 무한 렌더링을 피하기 위해 useEffect 사용 useEffect(()=>{ fetch('http://localhost:8080/test').then((response)=>{ return response.json(); // 받은 response객체를 json형태로 변환 }).then((resData)=>{ setDatas(resData.testObj); // json으로 변환한 response결과에 접근 }) },[]); return {datas.map((elem)=>{elem.title.. [React] memo, useMemo memo 컴포넌트가 업데이트 될 떄, 재실행 되지 않아도 되는 자식 컴포넌트들이 모두 업데이트 되는 경우가 있다. memo로 함수를 코드를 감싸주면 memo가 이전 prop 값과 새로 받을 prop값을 비교한 후 , 값이 같으면 memo가 막아준다 이는 부모컴포넌트에 의해 실행되었을 떄만 관련이 있고 내부의 상태값과는 관련이 없다. const Child = memo(function Child({text}){ return {text} }); export default Child 즉 자식 컴포넌트에서 관리하는 상태값이 바뀐 경우 > 컴포넌트 재실행 부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 바뀐 경우 > 컴포넌트 재실행 부모 컴포넌트가 재실행됐는데, 보내주는 속성값이 같은경우 > 컴포넌트 재실행 X (.. [React] useContext 1. prop drilling의 단점 - 여러 컴포넌트를 통해 공유하고자 하는 데이터를 자식에게 계속 넘겨주어야 함 - 거쳐가는 컴포넌트 중에는 직접적인 사용을 하지 않더라도, 전달하는 역할 때문에 값을 받아야 함 => 컴포넌트의 재사용이 힘들 수 있음 2. 해결책 : - 컨텍스트 값을 생성하고 해당 값을 제공하여 다수의 컴포넌트 또는 앱의 모든 컴포넌트를 묶어줌 - prop drilling 없이도 상태값과의 연결이 용이함 3. 사용방법 import {createContext, useState, useReducer} from 'react'; // 아래와 같은 기본 값 설정이유 : 자동완성 기능 얻을 수 있음 // 다른 컴포넌트에서 context값 사용시 자동 완성으로 값 추천 해줌 export const.. [React] useEffect, useCallback useEffect - 사이드 이펙트를 잘 다루기 위한, Hook - API 싱크를 위해 사용 가능 사이드 이펙트 - 앱이 제대로 동작하기 위해 실행되어야 하지만 컴포넌트 렌더링 중 직접적인 영향을 미치지 않는 작업 주의 할 점 - 모든 부수 효과에 대한 과한 사용은 좋지 않음 ex) localStorage에 있는 item을 가져와서 상태값을 추가 하는 경우에 useEffect를 쓰는 등.. localStorage의 item은 위의 코드의 위치를 가져오는 함수와 달리 콜백 함수 없이 즉각적으로 데이터를 불러오기 때문에 굳이 useEffect를 쓰지 않고 직접 useState초기 값으로 설정 해도 됨. - 컴포넌트 렌더링이 끝난 후 추가적으로 실행되는 방식이라서 남용하면 성능 낭비가 될 수 있음 설명 및 실.. 이전 1 2 3 4 다음