Hazellog

이전에는 전역 변수의 관리를 위해 React context를 사용했다면, 이번에는 Redux를 사용하려고 한다. React와 typescript 환경에서 코드를 작성하고 있다! Redux란? 리덕스는 action 이벤트를 사용하여 어플리케이션 상태를 관리하고 업데이트하는 라이브러리이다. 전체 어플리케이션에서 상태에 접근할 수 있는 특징이 있어 전역 변수를 관리할 수 있다. 즉, 해당 값이 필요한 컴포넌트에 도달하기 위해서 거치는 모든 자식 컴포넌트에 매개변수로 값을 전달하지 않고, 값이 필요한 컴포넌트에서만 참조하여 사용할 수 있다. https://react-redux.js.org/ React Redux | React Redux Official React bindings for Redux react-re..

React context는 상태를 전역적으로 관리할 수 있다. 하위 컴포넌트에 props로 인자를 전달하는 경우, 값을 사용하지 않는 컴포넌트라도 전달의 목적으로 값을 전달해야 한다. context를 사용하여 상태관리를 더 효율적으로 관리할 수 있다. useContext는 useState 를 함께 사용하여 구현할 수 있다. nested 되어 props로 변수를 전달하는 경우는 아래 코드와 같다. //Nested.js export const Nested = (props) => { return ( Nested ) } const Component = (props) => { return ( Component ) } const Component2 = (props) => { return ( Component2 {p..

Context 란? Context는 모든 자식 컴포넌트에 props로 전달하지 않고 데이터를 전달할 수 있는 방법이다. 데이터는 top-down 방식으로 props를 사용하여 전달하는 경우, 사용하려는 자식 컴포넌트에 도달할 때까지 모든 컴포넌트에 props로 전달해야 한다는 번거로움이 있다. context는 컴포넌트 안에서 전역적으로 데이터를 공유할 수 있어 props 전달없이 데이터를 확인할 수 있다. 이는 사용자 정보, 테마, 언어 등을 관리할 때 사용할 수 있다. ☝🏻 만약, 단순히 많은 단계를 거쳐 props를 전달하는 것을 피하기 위함이라면 context 보다는 component composition 이 더 나은 방법일 수 있다. API React.createContext const MyCon..

React 와 Typescript를 사용하여 프로그램을 작성하는 과정에서 발생한 오류이다. 문제 상황 아래 코드와 같이 function component 내에서 useEffect 를 사용하고, 해당 훅 내에서 socket 통신을 하는 상태이다. function testFunc() { useEffect(()=>{ socket.on("test", ()=>{ console.log("test!"); }); }); return ( testFunc ); } 해당 코드에서 socket 통신을 하는 경우, 소켓을 듣는 횟수가 중복해서 발생했다. //1회 test! //2회 test! test! //3회 test! test! test! socket.emit(”test”) 는 동일하게 한 번만 실행했음에도 socket.o..

문제 페이지를 새로고침하는 경우, 모든 변수와 상태 값이 초기화되는 문제가 있었다. 결론적으로 useState와 useContext를 정확하게 이해하지 않아 발생한 오류였다. useState 는 변수 값을 상태 값으로 저장하여 상태 값이 변경되었을 경우, 해당 상태 값을 사용하는 컴포넌트만 부분적으로 리렌더링된다. 전체 페이지를 리렌더링 하지 않고, 부분 리렌더링으로 부하를 줄일 수 있다. useContext는 useState의 사용이 많거나 변수를 전역으로 선언하여 사용하는 경우에 사용에 용이하다. useState 값을 context 내에 저장하여 관리할 수 있다. 다만, 두 Hook 모두 값이 변하지 않는 것이 아니다. 리렌더링 되는 경우에는 기존의 값을 기준으로 변화된 컴포넌트들만 바뀌어 렌더링되어..

react와 vite를 사용하여 프런트엔드 코드를 구현했다. 문제 node.js 에서 사용하듯이 아래와 같은 코드로 작성했다. require("dotenv").config(); console.log(process.env.KEY); 위의 코드의 출력 결과는 undefined ! 또는 아래의 오류가 발생한다. ReferenceError: process is not defined 우선, VITE에서는 process를 사용하지 않는다. 그럼 자동으로 파일을 읽어오는 건가? 했지만, dotenv 파일을 자동으로 읽어오지 않는다. 해결 방법 우선 env 파일의 경로를 설정한다. 기본적으로 root로 설정되어 있다. //vite.config.ts export default defineConfig({ plugins: ..

history.push 로 페이지 이동시 렌더링이 되지 않는 문제가 확인했다. 새로운 게임 방을 만들어 입장하고, 방을 바로 나왔을 때, 게임방에 아무도 없기에 방이 삭제된다. exit 버튼으로 “/game” 경로로 이동할 때, history.push("/game"); 위의 코드를 사용하여 이동했다. 해당 페이지로 이동했을 때, 게임방이 남아있는 것을 확인할 수 있지만, 새로고침을 하고 나면 방이 없어지는 것을 알 수 있다. 따라서, 해당 페이지에서 새로고침이 되지 않는 문제가 있다는 것을 알 수 있었다. 1. window.location.reload() 사용하기 window.location.reload(); “hitory.push” 함수를 실행한 후, 위의 코드를 실행하여 새로고침을 하는 방법이 있다...