기록

React Hooks Hooks 는 리액트 v16.8 에 새로 도입된 기능으로서, 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해줍니다. 함수형 컴포넌트에서 상태(state)와 생명주기(lifecycle) 메서드를 사용할 수 있도록 하는 기능입니다. 코드를 더 간결하고 가독성 있게 작성할 수 있습니다. *함수형 컴포넌트, 클래스형 컴포넌트 https://sumni.tistory.com/69 react Component React Component 비교 Class Component 많은 기능제공, 대신 코드길고복잡, 성능느림 - provide more features - longer code - more complex code - slower performance Functional..

개념 Socket 일반적인 소켓은 네트워크 통신을 위한 엔드포인트를 나타냅니다. TCP/IP 기반의 네트워크에서 사용되며, 클라이언트와 서버 간의 양방향 통신을 가능하게 합니다. 주로 로컬 네트워크 또는 인터넷을 통해 컴퓨터 간의 통신을 할 때 사용됩니다. WebSocket 웹 소켓은 HTML5에서 지원하는 통신 프로토콜로, 클라이언트와 서버 간의 실시간 양방향 통신을 가능하게 합니다. 일반적인 소켓과 달리, 웹 브라우저에서도 사용할 수 있으며, HTTP 프로토콜 위에 구현되어 있습니다. 웹 소켓은 클라이언트와 서버가 지속적으로 연결된 상태를 유지하며, 실시간으로 데이터를 주고받을 수 있습니다. Socket.IO Socket.IO는 웹 소켓을 이용한 실시간 양방향 통신을 구현하기 위한 JavaScript..

Redux는 JavaScript 애플리케이션의 상태 관리 라이브러리로, 특히 React와 함께 사용되어 복잡한 상태를 효율적으로 관리하고 상태 관련 로직을 분리하는 데 도움을 줍니다. Redux의 핵심 개념은 "스토어(Store)", "액션(Action)", "리듀서(Reducer)"입니다. https://sumni.tistory.com/67 Redux, Props, State 개념 1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 sumni.tistory.com 1. Redux 설치 먼저 Redux를 설치합니다. npm 또는 ya..

combineReducers Redux에서 제공하는 유틸리티 함수 중 하나로, 여러 개의 리듀서를 하나로 합치는 역할을 합니다. 이를 사용하면 Redux 스토어에 여러 개의 리듀서를 등록할 수 있으며, 각 리듀서는 서로 다른 부분 상태를 관리하게 됩니다. combineReducers를 사용하면 리덕스 애플리케이션의 상태를 모듈화하고 유지보수를 쉽게 할 수 있습니다. combineReducers를 사용하지 않는 경우 // reducers.js const initialStateA = { dataA: [], }; const initialStateB = { dataB: {}, }; const reducerA = (state = initialStateA, action) => { // ... }; const red..

기본 설정 방법 https://sumni.tistory.com/229 React Router Dom 설정(버전 5.x, 6링크) react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝 sumni.tistory.com 버전 6 변경 사항 1. 라우트 설정 방법 이전 버전에서는 컴포넌트를 사용하여 경로와 컴포넌트를 매핑했습니다. 버전 6에서는 대신 를 사용하여 라우트를 정의합니다. 이제 각 경로에 대한 element 속성을 사용하여 해당 경로에 렌더링할 컴포넌트를 지정합니다. 예전 버전 (버전 5..

react-router-dom은 React 애플리케이션에서 라우팅 및 네비게이션을 처리하기 위한 JavaScript 라이브러리입니다. 1. React 앱에 react-router-dom 설치하기 먼저, React 앱에 react-router-dom을 설치합니다. 프로젝트 루트 디렉토리에서 다음 명령을 실행합니다 npm install react-router-dom 2. 라우터 설정하기 React 앱의 라우팅을 위해 BrowserRouter 컴포넌트를 사용합니다. 주로 앱의 최상위 컴포넌트인 App.js에서 설정합니다. import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; impo..

1. 페이지 생성 1. LoginPage.js 의 return()안에 html코드부터 작성 2. input tag에 타이핑 하기위해서는 state를 변경해줘야함 LoginPage.js (일부) //서버로 보낼 값들을 state로 갖고 있음 const [Email, setEmail] = useState("");//괄호 속에는 초기값, "": 빈칸으로 설정 //state set하는 함수 등록 const onEmailHandler = (event) => { setEmail(event.currentTarget.value) } //value와 onChange 추가 3번 코드 참고 3. login 버튼을 submit 타입으로, form에 onSubmit함수 등록 LoginPage.js (일부) Email Login..

React Component 비교 Class Component 많은 기능제공, 대신 코드길고복잡, 성능느림 - provide more features - longer code - more complex code - slower performance Functional Component 적은 기능제공, 코드 간단, 성능빠름 - provide less features - short code - simpler code - faster performance React Hooks이 발표된 이후로 기존에 functional compoent에서는 사용할 수 없던 lifecycle, state 부여 등의 기능을 functional compoent에서도 사용할 수 있게 됨. https://www.spec-india.co..

1. redux dependencies 다운로드 redux react-redux redux-promise, redux-thunk : store에서 객체형식의 action만 받는데 promise, function 형식으로 오면 받을 수가 없는데 각각 이를 받는 방법을 알려주는 역할 2. app에 redux를 연결 (밑에 설명 및 reducer코드 있음.) client > index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import { Provider..

1. 개념 Redux : 상태관리 라이브러리, state를 이용해 웹 사이트 혹은 애플리케이션의 상태 관리를 해줄 목적으로 사용. Props 1. porperties의 줄임말 2. 부모 컴포넌트에서 자식 컴포넌트한테 보낼 수 있음. 3. immutable 변할수 x (바뀌려면 다시 부모에서 자식에게 props를 덮어씌워야함) State 1. 컴포넌트안에서 데이터를 전달 2. mutable 3. state가 변하면 re-render 된다. 2. 사용 이유 리액트 프로젝트에서는 대부분의 작업을 할 때 부모 컴포넌트가 중간자 역할을 한다. (ref 를 사용해서 포넌트 끼리 직접 소통 하는 방법은 있긴 하지만, 그렇게 하면 코드가 굉장히 많이 꼬여버리기 때문에 권장하지 않는 방식임.) Redux를 사용하면 상태..