react

[React - Trouble Shooting] state 값이 변경되지 않는 문제

이번 포스트에서는 state와 setState는 간단하게만 보고 넘어가자. 배경 지식 state state 값은 setState()를 통해서만 변경이 가능하다. setState useState로 만든 useState는 비동기적 특성을 갖는다!! 문제점 useEffect 훅 안에서 이벤트 리스너가 실행되면서 state 값이 변했다. 이 state 값이 의존성배열에 들어가있는 다른 useEffect 훅을 실행시켜 state 값을 확인해보면 값이 잘 나온다. 하지만 이벤트 리스너의 처리가 모두 끝나지 않았고, 변한 state 값을 통해 다른 로직이 실행되도록 구현되어 있었다. 여기서 문제가 발생한다!! 원인 앞서 말했듯이 React의 setState는 비동기적으로 실행된다. 정확히는 현재 setState는 이..

[React - Trouble Shooting] 불필요한 렌더링으로 인한 문제

하나의 페이지에 속해있는 컴포넌트에서 서버에 소켓 통신을 보내는 코드를 구현했다. 하지만 서버에 한 번의 소켓 연결이 이루어지는 것이 아니라 여러번의 연결이 이루어졌다. 불필요한 렌더링이 일어난 것이다. 이렇게 연결이 여러번 이루어지면서 서버에서는 여러 클라이언트가 연결되었다는 것으로 인식한다. 어떻게 해결할 수 있을까? 렌더링 자체를 제어할 수 있는 방법도 있지만 이번에는 그런 방법이 아니다. useEffect 훅을 사용할 수 있다. useEffect(() => { // 부수 효과 작업을 수행하는 콜백 함수 // ... return () => { // 정리(clean-up) 함수 // 컴포넌트가 언마운트되거나 의존성이 변경될 때 호출됨 // ... }; }, [/* 의존성 배열 */]); 의존성 배열 ..

[React] 리액트 시작하기

Node.js 설치하기 https://nodejs.org/ko/ Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 이 사이트에서 원하는 버전에 맞게 설치해준다. (나는 LTS인 18 버전으로) 계속 넘어가서 설치를 잘 했다면 Node 버전을 확인하는 node -v, npm 버전을 확인하는 npm -v 을 통해 설치가 잘 되었는지 확인해본다. 이렇게 확인 가능하다. npx 또한 확인하기를 원한다면 npx -v 을 통해 확인할 수 있다. React 프로젝트 생성 npx create-react-app {app 이름} npx 를 통해 프로젝트가 생성된다. src 폴더 내에 App.js 가 메인 페이..