프런트엔드41 React, Context API와 useContext Hook 사용 / 로컬 스토리지에 저장하고 읽기 Context API와 useContext Hook 사용 Context를 만들고, 커스텀 훅을 만들어서 Context에 저장된 데이터를 더 쉽게 접근할 수 있게 한 것 TodosContext 1.export const CountContext = createContext(); 2. 사용자 Hooksconst TodosContext = createContext();export const useTodos = () => useContext(TodosContext); 스타일 면에서 두 코드의 차이는 거의 없다.두 코드 모두 단순한 래퍼 형태의 커스텀 훅을 사용하는 방식이다. 하지만 확장성에서는 약간의 차이가 있을 수 있다. 예를 들어, useTodos는 나중에 할 일 목록을 추가하거나 필터링하는 기능을 추가할 때.. 2024. 11. 5. React, useContext useContext useContext 를 사용하면 기존의 Context 사용 방식보다 더 쉽고 간단하게 Context를 사용이 가능하고, 앞서 다뤘던 useState, useEffect와 조합해서 사용하기 쉽다는 장점이 있다. useContext를 사용할 때 주의해야 할 점은 Provider에서 제공한 value가 달라진다면 useContext를 사용하고 있는 모든 컴포넌트가 리렌더링 된다는 점이다. 따라서 useContext를 사용할 때 value 부분을 메모제이션 하는데 신경을 써야한다. [설치]npm install react-router-dom / yarn add react-router-domnpm install axios / yarn add axios Context - context를 .. 2024. 11. 4. React, Redux Redux - 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.- 상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.- Redux와 React는 독립적으로 사용될 수 있는 별개의 다른 라이브러리이다.- Redux는 자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리이다.- Redux는 Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용할 수 있다 [설치]1.yarn add react-redux ( npm install react-redux / npm i react-re.. 2024. 11. 4. React, React-Router React-Router 리액트는 SPA (Single Page Application) 방식 일반적으로 클라이언트가 요청을 하면 서버에서 요청한 페이지를 보여준다. 그러면서 로딩되는 모습이 보인다. 하지만 리액트는 모든 문서를 다 읽어드린 다음 클라이언트가 요청을 하면 로딩을 하지 않고 바로 보여주기 때문에 속도가 빠르다. [설치]npm install react-router-domyarn add react-router-dom # react-router-dom 변경사항 (2021. 11. 25 기준)1. Route 컴포넌트를 이제는 Routes 컴포넌트로 필히 감싸주어야 한다. 2. Route 컴포넌트의 매개변수 compent 가 element 로 바뀌었다. 3. useHistory 사라짐 -> useNa.. 2024. 11. 4. React, 비동기 통신 - ajax 비동기 통신 - ajax 서버에 새로고침 없이 요청할 수 있게 도와준다.서버로 네트워크 요청을 보내고 응답을 받을 수 있도록 도와준다. jQuery $.ajax() js fetch() json 형식으로 가져온다. axios axios.get() -> object 형식으로 가져온다. 외부 API 비동기 통신을 위해서 fetch()를 이용한다.fetch()에 API 경로를 적어주면 promise가 반환된다.fetch( url, [options] ) fetch(url).then(콜백) - 응답 성공.catch(콜백) - 응답 실패 axios.get(url) .then(콜백) - 응답 성공 .catch(콜백) - 응답 실패 설치방법 npm install axios / yarn add axioxya.. 2024. 11. 4. React, localStorage 사용하기 localStorage 사용하기 localStorage.setItem(key, value); json 형식으로 불러온다. 상태 변수 const [list, setList] = useState([]);새로고침하면 다 사라진다. 로컬 스토레이지 읽어오기 const [list, setList] = useState(JSON.parse(localStorage.getItem('list')) || []); -> 리스트를 읽어올때 값이 없다면(거짓이라면) 빈 배열을 가져와라 로컬 스토레이지 저장하기 useEffect(() => { localStorage.setItem('list', JSON.stringify(list)); -- json 형식으로 }, [list]) -- 리스트의 내용이 바뀔 때 마다 .. 2024. 11. 4. 이전 1 2 3 4 ··· 7 다음
