useRef란?useRef는 React의 Hooks 중 하나로, 컴포넌트의 생명주기 동안 지속적으로 유지되는 값을 저장하는 용도로 사용된다.마치 우리가 변수를 선언하고 값을 저장하는 것처럼, useRef도 값을 저장하지만 몇 가지 특별한 특징을 가지고 있다!useRef의 기본 개념useRef의 가장 기본적인 형태를 살펴보자.import { useRef } from 'react';function MyComponent() { const myRef = useRef(null); return Hello, World!;}이 코드에서 useRef는 초기값으로 null을 받아 생성된다.useRef가 반환하는 객체는 .current라는 프로퍼티를 가지고 있으며,이 프로퍼티를 통해 실제 값에 접근하고 수정할 수 있..

최근 React로 프로젝트를 진행하면서 페이지네이션을 구현해야 하는 상황이 있었다.백엔드에서 모든 데이터를 한 번에 받아와서 프론트엔드에서 페이지네이션을 처리하는 방식을 선택했다. (이유는 나중에!!!)현 과정에서 페이지네이션의 개념과 구현 방법에 대해 깊이 이해할 수 있었던 경험을 공유하고자 한다!!!!!!페이지네이션이란?페이지네이션은 데이터를 여러 페이지로 나누어 표시하는 UI 패턴이다.페이지네이션의 주요 목적이 뭘까?한 페이지에 모든 데이터를 표시하는 대신, 적절한 양의 데이터만 보여줌으로써 사용자가 정보를 쉽게 찾고 탐색할 수 있게 한다.화면에 렌더링되는 데이터의 양을 제한함으로써 브라우저의 렌더링 부하를 줄일 수 있다.그럼 페이지네이션 구현 방법에 대해 알아보자.페이지네이션 구현 방법기본 구조 ..

리액트 이벤트 핸들링이란?리액트에서 이벤트 핸들링은 사용자의 상호작용을 감지하고 처리하는 방법이다.웹 애플리케이션에서 버튼 클릭, 폼 제출, 키보드 입력 등 다양한 사용자 액션에 반응하기 위해 필수적인 개념이라고 할 수 있다.(일반 JavaScript의 이벤트 핸들링과 비슷하지만, 리액트만의 특별한 문법과 규칙이 있다. => 아래에 정리해보겠다.)이벤트 핸들러의 기본 문법이벤트를 사용할 때 주의 사항/기본 문법으로는 네 가지로 추릴 수 있다.이벤트 이름은 camelCase로 작성해야한다.예를 들어 HTML의 onclick은 리액트에서는 onClick으로 작성해야한다.HTML에서는 이벤트에 실행할 자바스크립트 코드를 문자열로 전달하지만, 리액트에서는 함수 형태의 값을 전달한다.DOM 요소에만 이벤트를 설정..

최근 리액트 개념을 다지다가 Props에 대해 정리해봐야겠다고 생각이 들었다.그래서 오늘은 필자가 Props의 개념만 딱 정리한 가이드 글을 써보겠다. 😉Props란 무엇인가?React에서 Props(Properties의 줄임말)는 컴포넌트 간에 데이터를 전달하는 방법이다.마치 함수의 매개변수처럼, 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용한다고 이해하면 될 것 같다. 또한 Props는 읽기 전용(Read-only)이라는 특징을 가지고 있어, 자식 컴포넌트에서는 전달받은 props를 직접 수정할 수 없다!props를 바꾸려면 부모 컴포넌트에서 바꿔주어야 한다.예를들어, 부모 컴포넌트의 state를 자식 컴포넌트의 props로 전달하고, 자식 컴포넌트에서 특정 이벤트가 발생할 때 부모 컴..

최근에 React의 개념을 파헤치던중 컴포넌트의 생명주기에 대해서 공부하게 되었다.처음에는 단순히 컴포넌트가 화면에 나타나고 사라지는 것이라고만 생각했는데, 실제로 공부해보니 훨씬 더 복잡하고 깊이있는 개념이었기에 필자가 생명주기에 대해 공부하면서 정리한 내용을 공유하고자 한다. 생명주기란?React 컴포넌트의 생명주기는 컴포넌트가 생성되고, 업데이트되고, 제거되는 전체적인 과정을 의미한다.이는 마치 우리가 태어나서 살아가다가 죽음을 맞이하는 것처럼, 컴포넌트도 자신만의 생애 주기를 가지고 있다.(React에서는 이러한 각각의 단계에서 특정 코드를 실행할 수 있게 해주는 메서드들을 제공하고 있다.) 그럼 이제 자세하게 알아보자!1. 마운팅 단계마운팅은 컴포넌트가 처음 DOM에 렌더링되는 과정이며, 이 단..

처음 React 프로젝트를 시작할 때 마주치는게 무엇일까? 함은 바로 이 npm이라고 할 수 있다.블로그 여기저기를 찾다보면 npm install 뭐시기 뭐시기 하라고 해서 뭔지도 모르고 따라한 사람들이 많을것이다.(필자도 마찬가지,,))따라서 필자는 npm에 대해서 공부하고 이해한 내용을 정리해보기로 했다.npm이란?npm은 Node Package Manager의 약자로, JavaScript 패키지의 거대한 생태계라고 볼 수 있다.전 세계 개발자들이 만든 다양한 JavaScript 라이브러리들을 쉽게 설치하고 관리할 수 있게 해주는 도구이며,Node.js를 설치하면 자동으로 함께 설치되는데, 마치 앱스토어처럼 필요한 패키지를 검색하고 설치할 수 있다고 보면된다!예전에는 개발자들이 직접 JavaScrip..

SPA와 라우팅의 이해먼저 SPA가 무엇인지 알아봐야 되지 않을까 싶다. 뭘까?SPA(Single Page Application)는 하나의 HTML 페이지에서 JavaScript를 통해 동적으로 콘텐츠를 변경하는 웹 애플리케이션이다.최초 접속 시 필요한 모든 정적 리소스(HTML, CSS, JavaScript)를 한 번에 받아온 후, 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만 서버에서 전달받아 페이지를 업데이트한다.아직도 이해가 안되는 사람들이 많다고 생각한다. 정리해보자면 아래와 같다.[전통적인 웹 페이지 방식]브라우저 -> 페이지 요청 -> 서버서버 -> HTML 페이지 전체 전송 -> 브라우저브라우저 -> 페이지 전체 새로고침[SPA 방식]브라우저 -> 최초 접속 -> 서버서버 -> 전체..

최근 프로젝트를 진행하면서 카카오 로그인과 같은 API 키를 .env파일과 함께 다루다가 마주친 문제가 있었다.바로.env파일 내에서 카카오 로그인 API키를 변경하고 저장을 눌렀는데,이미 npm start로 실행된 웹에서 변경된 api키를 감지하지 못하고 카카오 로그인이 안된 문제였다.. (식겁)일단 이 부분에 대해 트러블슈팅하기 전에 환경변수부터 알아보고자 한다.환경변수란?환경변수는 애플리케이션이 실행되는 환경에 따라 다르게 설정되어야 하는 값들을 저장하는 변수이다.API 키, 데이터베이스 접속 정보, 서버 URL 등과 같은 민감한 정보나 환경별로 다르게 설정해야 하는 값들을 관리할 때 주로 사용된다!!!// .env 파일 예시REACT_APP_KAKAO_KEY=kakao_api_keyREACT_AP..

React를 배우면서 가장 어려웠던 개념 중 하나가 useEffect였던 것 같다.필자는 useEffect가 처음에는 단순히 '컴포넌트가 렌더링될 때 실행되는 함수구나'라고 생각했지만, 실제로 사용해보니 그 이상의 것들이 있다는 것을 알게 되었다.그래서 필자는 useEffect에 대해 정리하고자한다. useEffect란?useEffect는 React 컴포넌트에서 부수 효과(Side Effects)를 처리하기 위한 Hook이다.❗️여기서 부수 효과란? ❗️데이터 페칭, 구독 설정, DOM 수동 조작과 같은 외부 시스템과의 동기화 작업을 의미한다.클래스 컴포넌트의 componentDidMount, componentDidUpdate, componentWillUnmount를 하나로 통합한 것이라고 볼 수 있다!..

React란 스택을 배우고 공부하면서 마주치지 않을 수가 없는 개념이 있다.바로 Props이다. 필자는 이 Props에 대해 복잡하게는 아니더라도 이게 무엇인지에 대한 개념정리를 해보려고 한다.Props가 뭘까?Props는 React에서 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는 방법이다.Properties의 줄임말로, 컴포넌트 간의 통신을 가능하게 하는 핵심적인 메커니즘이기 때문에 너무 중요한 개념이라고 볼 수 있다.기본 개념Props는 읽기 전용(read-only)이며, 자식 컴포넌트에서 직접 수정할 수 없다.이는 React의 단방향 데이터 흐름 원칙을 따르는 것으로, 데이터의 흐름을 예측 가능하게 만드는 장점이 있다. 예시 코드를 잠시 살펴보겠다.// 부모 컴포넌트function Paren..