React.js3 [React] useRef의 장점 및 활용 React.js의 가장 큰 특징은 업데이트 반영, 즉 리렌더링이라고 생각한다. 이를 활용하기 위해 어떤 특정한 값의 변동을 반영할 때 상태 관리 hook인 useState를 주로 사용하게 된다. 그런데 React.js는 자바스크립트 문법을 사용하면서도 변수(ex. let count = 0 )를 사용하면 상태 관리에 애를 먹게 된다. 리렌더링 후 값이 초기화 되버리는 단점이 있기 때문인데 useState의 장점(값을 유지) 과 변수의 장점(렌더링 되지 않아 성능에 도움)을 합쳐둔 useRef가 있다. 각각의 hook을 비교하면서 장점과 활용법에 대해 포스팅하기로 했다. * useState, 변수 , useRef 비교 useState, 변수 , useRef를 비교하기 위해 버튼을 클릭하면 값을 증가시키는 U.. 2024. 2. 20. [구글 파이어베이스 호스팅(Firebase Hosting)] 프론트엔드 리액트 프로젝트 배포하기 백엔드 스프링 부트 프로젝트 배포에 성공한 나는 프론트엔드 리액트 파일 또한 배포하기로 했다. 내 프로젝트에서 대부분의 기능이 Axios를 활용한 클라이언트 -> 서버 / 요청-응답 구조였기 때문에 리액트 배포 역시 필연적이었고, 이번에는 NCP가 아닌 다른 호스팅 서비스를 이용해보기로 했다. 정적 웹사이트를 무료로 배포할 수 있는 서비스는 꽤 많이 있다. Netlify , Heroku , Vercel , Github Pages 등의 사이트들이 Javasript , React.js 프로젝트를 무료로 배포할 수 있게 서비스하고 있다. (Heroku는 무료 지원이 거의 사라졌다고 한다.) 다만 나는 어떤 이유에서인지 배포과정에서 갖가지 오류가 발생하여 애를 먹었는데, 구글 파이어베이스의 호스팅 서비스로 배포.. 2023. 9. 22. [React] 리액트 쿠키 사용법 웹사이트에서 '쿠키'를 이용하면 클라이언트를 식별하는데 유용하게 활용이 가능하다. 나는 쿠키로 회원과 비회원을 구분해 useState 훅으로 ui를 유동적으로 변경하는 방식으로 프론트엔드를 개발중이다. 그래서 리액트의 'cookie' 사용법에 대해 포스팅하려고 한다. 여기서 주의할 것은 'cookie'와 'react-cookie'는 문법이 다르다는 점이다. 'js-cookie'도 조금 다르다. 난 이전에 'react-cookie'로 개발을 해봤는데, 이번에는 사용해보지 않은 'cookie'를 활용해보았다. yarn 홈페이지 기준 이용자 수가 월등히 많은걸 보니 훨씬 상용적으로 쓰이는 듯 싶었다. 아무튼 패키지를 설치할 때 세 가지를 확실히 구분하는게 좋을 듯. 우선, 라이브러리를 설치하고, 사용할 컴포넌.. 2023. 7. 27. 이전 1 다음
