이것저것

Context API와 useContext Hook 사용 Context를 만들고, 커스텀 훅을 만들어서 Context에 저장된 데이터를 더 쉽게 접근할 수 있게 한 것 TodosContext 1.export const CountContext = createContext(); 2. 사용자 Hooksconst TodosContext = createContext();export const useTodos = () => useContext(TodosContext); 스타일 면에서 두 코드의 차이는 거의 없다.두 코드 모두 단순한 래퍼 형태의 커스텀 훅을 사용하는 방식이다. 하지만 확장성에서는 약간의 차이가 있을 수 있다. 예를 들어, useTodos는 나중에 할 일 목록을 추가하거나 필터링하는 기능을 추가할 때..

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

Redux  - 리덕스를 사용하면 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더욱 효율적으로 관리 할 수 있으며 글로벌 상태 관리도 손쉽게 할 수 있다.- 상태값을 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다.- Redux와 React는 독립적으로 사용될 수 있는 별개의 다른 라이브러리이다.- Redux는 자바스크립트 어플리케이션에서 흔히 쓰이는 상태관리 라이브러리이다.- Redux는 Angular, Vue, Ember, jQuery 또는 Vanilla JavaScript와 같은 다른 라이브러리, 프레임워크에서도 사용할 수 있다 [설치]1.yarn add react-redux ( npm install react-redux / npm i react-re..

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

비동기 통신 - 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..

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]) -- 리스트의 내용이 바뀔 때 마다 ..

Hook ? https://ko.reactjs.org/docs/hooks-state.html  Hook은 React 16.8버전에 새로 추가되었습니다.Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. Hook 함수형 컴포넌트는 렌더링할때마다 내부의 것들을 기억하지 못한다.다시 생성, 초기화 해야한다. (변수, 함수 등) 내부의 것들을 유지하기 위해서 hook이 등장했다 - useXXX  * 웹 스토어에서 React Developer Tools (Chrome에 추가)   값을 확인 할 수 있다.  useState 값이 유동으로 변할 때const [상태데이터, 상태데이터의 값을 변경해주는 함수] = React.useState(초기값);  useRef 리액트에서 제공..

Props  properties의 약자로 자식에서 자식으로 데이터를 보낼 수 없다.즉, 자식끼리는 연결할 수 없다.props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터나 함수를 말한다. 형식 값 보내기변수명=값/> [예시] 홍길동' age='25' />const Person = ({name, age}) => {   버튼이벤트  이벤트 : on + 첫글자는 대문자메서드 호출}>클릭 리엑트는 순수 자바스크립트가 아니다 => 베이스가 자바스크립트일 뿐이다 함수 뒤에 ()를 붙여서 호출하면 새로고침 하자마자 무조건 실행된다.=> 해결하려면 함수로 한먼 묶어준다.=> 값을 넘길때는 함수 ex) () => 함수(값)

React 프로젝트 생성-1 [실습]프로젝트 열기Ctrl + ` > 터미널 열기npx create-react-app day01 ① Ctrl + backtick(`) - 터미널 열기② npx create-react-app day01  ※ npx create-react-app day01 명령으로 프로젝트 생성 시 에러가 뜨면[에러]npm ERR! code ENOENTnpm ERR! syscall lstatnpm ERR! path C:\Users\bitcamp\AppData\Roaming\npmnpm ERR! errno -4058npm ERR! enoent ENOENT: no such file or directory, lstat 'C:\Users\bitcamp\AppData\Roaming\npm'npm ERR..

React 리액트 공식 홈페이지: https://react.dev/    UI(사용자 인터페이스)를 구축하기 위해 메타에서 개발한 Javascript 기반의 라이브러리 SPA(Single Page Application)는 한 페이지에 다 불러들인다.화면상에 데이터가 변경되는 경우 페이지 전체를 렌더링하는 것이 아니라 필요한 부분만 렌더링할 수 있다.웹 앱(web App), 네이티브 앱(Native App) -> 휴대폰 리액트 컴포넌트 div의 한 조각들, UI를 구성하는 조각에 해당하며, 도깁적으로 분리되어 재사용이 됨을 목적으로 사용된다.React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리한다. 클래스 컴포넌트, 함수형 컴포넌트가 있는데 요즘은 함수형 컴포넌트로 많이 사용한다...