리액트6 [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] Context API 사용법 일반적으로 React에서 컴포넌트 간에 데이터를 전달할 경우 props를 사용하여 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 넘겨주고 이어받는 방식을 많이 사용하게 된다. 그런데 멀리 떨어진 컴포넌트로 데이터를 전달하거나, props를 사용하기 적절치 않은 경우가 있다. 그럴 때 유용하게 사용할 수 있는 Context API를 설명하고, 적용하여 프로젝트를 개선한 사례를 기록하려고 한다. 1. Context API의 개념 React Context API는 React 애플리케이션에서 전역 상태를 관리하고 컴포넌트 간에 데이터를 효율적으로 전달하기 위한 도구이다. Props를 계속해서 컴포넌트로 전달하는 번거로움을 줄이고, 상태 및 데이터를 보다 쉽게 공유할 수 있도록 도와주는 역할을 한다. 2. Cont.. 2023. 8. 26. [React] 리액트 쿠키 사용법 웹사이트에서 '쿠키'를 이용하면 클라이언트를 식별하는데 유용하게 활용이 가능하다. 나는 쿠키로 회원과 비회원을 구분해 useState 훅으로 ui를 유동적으로 변경하는 방식으로 프론트엔드를 개발중이다. 그래서 리액트의 'cookie' 사용법에 대해 포스팅하려고 한다. 여기서 주의할 것은 'cookie'와 'react-cookie'는 문법이 다르다는 점이다. 'js-cookie'도 조금 다르다. 난 이전에 'react-cookie'로 개발을 해봤는데, 이번에는 사용해보지 않은 'cookie'를 활용해보았다. yarn 홈페이지 기준 이용자 수가 월등히 많은걸 보니 훨씬 상용적으로 쓰이는 듯 싶었다. 아무튼 패키지를 설치할 때 세 가지를 확실히 구분하는게 좋을 듯. 우선, 라이브러리를 설치하고, 사용할 컴포넌.. 2023. 7. 27. [리액트] useEffect React에서 useEffect 함수는 컴포넌트가 렌더링 될 때마다 실행되는 함수입니다. useEffect 함수는 컴포넌트의 상태나 속성 값 등이 변경될 때마다 호출됩니다. useEffect 함수는 이전 렌더링에서의 상태 값을 가져올 수 있으므로, 이전 값과 현재 값을 비교하여 변경이 있을 경우에만 추가적인 작업을 수행할 수 있습니다. useEffect 함수는 함수 컴포넌트 내에서 사용되며, 두 개의 매개 변수를 받습니다. 첫 번째 매개 변수는 함수 컴포넌트가 렌더링될 때 실행할 함수이며, 두 번째 매개 변수는 의존성 배열입니다. 의존성 배열은 useEffect 함수가 의존하는 값의 배열로, 해당 값이 변경될 때마다 useEffect 함수를 실행합니다. 빈 배열을 전달하면 컴포넌트가 처음 렌더링 될 때만.. 2023. 3. 4. 리액트 (React) React React는 Facebook에서 개발한 UI 라이브러리로, 모던 웹 애플리케이션 개발에 많이 사용됩니다. React는 다음과 같은 이유로 많은 개발자들에게 선택되어 사용되고 있습니다. Component 기반 구조: React는 Component 기반의 구조를 가지고 있어, UI를 작은 단위로 쪼개고 각각의 컴포넌트로 관리할 수 있습니다. 이를 통해 코드의 재사용성과 유지보수성이 높아지며, 대규모 애플리케이션 개발에 적합합니다. Virtual DOM: React는 Virtual DOM을 사용하여 UI 업데이트 성능을 최적화합니다. Virtual DOM은 실제 DOM과 동기화되는 가상의 DOM 구조를 사용하여, 변경된 부분만 업데이트하고 전체 UI를 다시 렌더링하는 것을 방지합니다. 이를 통해 U.. 2023. 2. 22. 이전 1 다음
