??Loading 처리?? 클라이언트에서 서버에 요청을 보내고, 그 요청을 응답받기 까지는 시간이 소요된다. 데이터 크기, 네트워크 환경에 따라 오래 걸린다. 사용자가 느끼기엔 소요되는 시간 만큼 빈 화면이 노출되면 굉장한 불편함을 얻게 된다.(이탈자 발생 !!) 그래서 loading 처리가 필요하다. 전 게시물에서 진행했던 것에서 이어서 보여주자면, import {React, useEffect, useState} from 'react'; import NewsItem from '../NewsItem'; const NewsList = () => { const [news, setNews] = useState([]) const [isLoading, setLoading] = useState(false) useE..

Context API react에서 제공하는 전역 상태를 관리할 수 있는 도구이다. 공식문서 :https://react.dev/learn/passing-data-deeply-with-context - 컴포넌트가 트리 구조로 중첩되어 깊고 넓게 뻗어나가면서, 각기 다른 컴포넌트에 영향을 주어야 할 일들이 발생한다. ​ 이를 통해 context API를 통해서 전역 state 관리가 가능하도록 할 수 있다. 아래 코드는 src/context/AuthContext.js이다. 아래는 초기 값이고 추후 추가 가능하다. App.js에서 AuthContext 의 isLoggedIn 값을 설정해주고, ​ 다른 컴포넌트(Navigation.js)에서 context에 있는 isLoggedIn 값을 사용하도록 useCont..

사이드 이펙트?! 리액트의 역할로는 1. UI 렌더링 2. 사용자 Input에 반응 ( Form input ) 3. 리렌더링 (state, props 변화에 따라) ​ -> 기본적인 리액트의 사이클을 벗어나는 동작이 발생한다면?! 예시 : 검색창 자동완성 기능(feat.naver, google...) ㄱ 입력 시 input 에서 onChange 이벤트 리스터, 이벤트 핸들러 동작 -> HTTP Request, Response 서버 통신 (이때도 리렌더링 발생) 리렌더링 ​ 여기서 사이드 이펙트를 보면 키워드 값이 바뀔 때 -> 리렌더링 서버에서 키워드로 자동완성 된 데이터를 받아왔을 때 -> 리렌더링 ​ ​useEffect 공식문서 : https://react.dev/reference/react/useE..