반응형 react16 [React/Redux] Redux 사용법 (1) -State/Action/Reducer/Store Redux란? 상태 관리 라이브러리로 Component별로 props/state를 바꿔주는 복잡한 관계를 redux 하나로 외부에서 state들을 공용으로 관리하여 가져다 쓸 수 있다. 1. State(상태) State란 React Component 내에서 사용되는 데이터 집합을 말하며 이 상태 정보를 가지고 컴포넌트의 속성을 바꾸거나 어떤 event가 일어났을 경우 상태 값을 변경하여 Component를 변경된 상태로 렌더링할 수 있다. 이런 State를 변경하는 것이 (Action)이며 Action과 Store를 연결해주는 스토어 관리자가 (Dispatcher)다. Store는 State를 관리하는 저장소로 State는 다음과 같이 객체 형식으로 사용한다. 객체 내에서 카테고리 별로 관리가 가능하다... 2022. 8. 4. [Error] Redux createStore 에러 처리 (deprecated) 이제 좀 Redux를 배워서 써먹어볼까하고 인터넷에 돌아다니는 예제들을 응용하여 작성 중에 Store 생성시 필요한 함수 createStore()가 deprecated 되어 사용할 수 없다고 떴다. 정확하게 말하면 configureStore()를 쓰라고 나오는데.... 어 일단 내가 초보니까 인터넷에 도는 예제들을 이용해야하기때문에 ㅎㅎㅎ 바뀐지 얼마 안된 configureStore를 쓸 수는 없고 당황하여 해결 방법을 찾아보았다. 1. 취소선은 유지되지만 그냥 그대로 사용할 수 있다고 한다. (그냥 무시하면서 쓸 것) 2. Redux에서 제시하는 configureStore()를 사용해볼 것 3. 아래대로 명시적으로 변경하여 그대로 사용할 것 난 그냥 3번으로 사용했다. 취소선도 보기 싫고 나온지 얼마 .. 2022. 8. 1. [React] UseEffect, UseRef 사용법 React에서 사용하는 Hook 중에서 UseEffect와 UseRef에 대해서 좀 더 알아보고 정리해보는 시간을 갖고싶어서 이 글을 작성한다. https://ko.reactjs.org/docs/hooks-effect.html Using the Effect Hook – React A JavaScript library for building user interfaces ko.reactjs.org 1. UseEffect란? 의존값으로 Props나 State등을 배열로 받아 해당 값이 변할 경우 UseEffect()의 첫번째 인자로 받은 함수를 실행시킬 수 있다. 밑에 세 가지 방법으로 사용되는데 1-1. 최초 렌더링 시에만 실행시키고 싶은 경우 useEffect의 두번째 인자로 [] 빈 배열을 설정해주면 최.. 2022. 7. 29. [React] Material UI를 이용한 FormDialog 구현하기 React에서 자주 쓰는 UI Framework 중 내 마음에 끌리는대로? 그 중 자주 쓴다는 Material UI를 이용해 Javascript의 Prompt 같이 입력하고 그 값을 받을 수 있는 Dialog를 만들어 보도록 하자. 1. Material UI 설치 https://mui.com/ MUI: The React component library you always wanted MUI provides a simple, customizable, and accessible library of React components. Follow your own design system, or start with Material Design. You will develop React applications fas.. 2022. 7. 29. [React] 실시간 채팅 구현하기 - Login 페이지 생성 그냥 js로 채팅기능 예제만 실행해 봤으나 본격적으로 react도 공부해볼겸 react로 client 구현을 제대로? 시작해보려고한다. 우선 CRA (Create-React-App)으로 리액트 프로젝트를 생성한다. 프로젝트 생성은 이전 글을 참고한다. 2022.07.04 - [개발 Study/Node, js, react] - [React] npm으로 react 프로젝트 생성하기 [React] npm으로 react 프로젝트 생성하기 1. Node.js 를 설치하여 npm 라이브러리 설치하기 앞선 글에서 Node.js 를 설치하여 npm 및 관련 라이브러리들을 설치하는 방법을 작성했으므로 아래 글을 참조한다. https://chuun92.tistory.com/13 [Node.js] No.. chuun92.t.. 2022. 7. 25. [React/Error] React 버전 변경/다운그레이드 및 에러 해결 *create-react-app 설치 후 다른 모듈 설치 시 버전 호환 문제 실시간 채팅 프로젝트를 위해 react 개발환경을 다음과 같이 설치 했다. $npx create-react-app chat 그런 다음 react ui를 사용하기 위해 관련 모듈을 설치했는데 다음과 같은 에러가 떴다. @materail-ui/core 모듈을 지원하기 위해선 react 버전을 18.2.0(현재버전) => 16.8.0(이전버전) 으로 변경해야 하는 문제였다. 설치된 react 를 다운그레이드 하기 위해선 다음과 같이 하면 된다. $npm install --save react@^16.8.0 react-dom@16.8.0 변경했더니 여기서 또 문제가 발생하는데 경고라서 무시하고 넘어가고싶지만 testing library .. 2022. 7. 6. [React] npm으로 react 프로젝트 생성하기 1. Node.js 를 설치하여 npm 라이브러리 설치하기 앞선 글에서 Node.js 를 설치하여 npm 및 관련 라이브러리들을 설치하는 방법을 작성했으므로 아래 글을 참조한다. https://chuun92.tistory.com/13 [Node.js] Node.js 및 npm 설치하기 1. npm 이란? Node Package Manager(NPM) Node.js의 패키지 관리자다. Node.js에서 사용하는 모듈들을 패키지로 만들어 npm을 통하여 관리하고 배포하고 있다. Python 공부할때 모듈 설치시 사용했던 pip와 비슷하 chuun92.tistory.com 2. React 컴파일 환경 만들기 create-react-app 을 설치하여 개발환경을 구축할 수 있다. $npm install -g c.. 2022. 7. 4. 이전 1 2 다음 반응형
