yujenius 님의 블로그

최근에 umc 활동을 하면서 React의 여러 가지 개념을 배우고 있는데, 이번에는 useContext에 대해 공부했다. 처음에는 props drilling 이 왜 문제인지 정확히 와닿지 않았는데, 직접 코드를 작성하고 나니 useContext의 필요성을 확실히 깨달을 수 있었다. 이 글에서는 props drilling의 문제를 알아보고, 이를 해결하는 방법으로 useContext를 사용하는 방법을 정리해보려고 한다. Props drilling 문제 이해하기React에서 부모 → 자식 → 손자로 데이터를 전달하려면 props를 계속 내려줘야 한다.이 과정에서 중간에 위치한 컴포넌트가 실제로는 데이터를 사용하지 않지만,단순히 props를 전달하기 위해 존재해야 하는 문제가 발생한다.이런 현상을 props ..

React 프로젝트 생성 중에 에러가 발생했다.!!!!!!!!!!!!!!!!Installing template dependencies using npm...npm ERR! code ERESOLVEnpm ERR! ERESOLVE unable to resolve dependency treenpm ERR! npm ERR! While resolving: reactstudy@0.1.0npm ERR! Found: react@19.0.0npm ERR! node_modules/reactnpm ERR! react@"^19.0.0" from the root projectnpm ERR! npm ERR! Could not resolve dependency:npm ERR! peer react@"^18.0.0" from @t..

React에서는 useState를 사용하여 상태를 관리한다. 하지만 직접 state를 변경하면 React의 상태 관리 흐름을 깨트려 버린다. 난 이 부분이 React를 공부하면서 헷갈리고 어려웠던 개념이기에 정리를 통한 완벽 학습을 목적으로 글을 써보려한다.   ❌ 직접 변경하면 안 되는 이유React에서는 state가 변경될 대마다 컴포넌트를 다시 렌더링한다. 하지만 state를 직접 수정하면 이를 감지하지 못해 렌더링이 일어나지 않거나, 예상치 못한 동작이 발생할 수 있다. const [count, setCount] = useState(0);// ❌ 이렇게 하면 안 됨!count = count + 1; // 상태 직접 변경 (React가 감지하지 못함)그냥 쉽게 이해하도록 설명한다면.. 자료형이 co..

얼마 전까지 Vanila JS 만을 고수하던 나이기에 React를 시작할 때 JSX 언어는 너무 생소했다새로운 개념을 다시 적립한다는 것이 받아들이기 힘든 현실이지만 JSX 는 React 를 하기 위해서 필수적인 개념이기에 이번 글에서 다뤄보려한다.JSX는 Javascript 내에서 XML 과 유사한 문법을 사용할 수 있도록 도와준다. 그렇지만 사용하다 보니 생소한 문법과 사용법이 미묘하게 다르기에 이 글에서는 React 비기너들을 위해 !!JSX의 기본 개념과 꼭 지켜야 하는 주요 문법에 대해서 정리해보도록 하겠다.  JSX의 기본 개념 JSX는 JavaScript 코드 내에서 HTML과 유사한 구조를 작성할 수 있는 문법 확장이다.1. UI를 선언적으로 표현할 수 있다. const element = ..

React 개발을 하면서 서버와 데이터를 주고 받는 기능은 필수적이다API 요청을 보낼 때 대표적으로 사용되는 방법으로는 fetch API 와 axios 가 있다.나는 개발을 하면서 두 방법 중 어떤 것이 더 나을까? 라는 고민이 있었다. 이 글에서는 fetch API 와 axios를 비교하고,React 프로젝트에서 어떤 상황에서어떤 방법을 선택해야 하는지 알아보도록 하겠다. fetch API vs axios 비교1. fetch API const fetchData = async () => { try { const response = await fetch('https://example.com/api', { method: 'POST', headers: { 'Content..

프론트 엔드 공부를 시작하면 가장 많이 마주하게 되는 게 DOM 이라고 생각한다.특히, 리액트 와 같은 라이브러리를 사용할 때,가장 큰 차이점은 Virtual DOM 을 사용한다는 것이다. 이번 글에서는 DOM 과 가상 DOM의 차이점, 그리고 실제 개발에서 이를 어떻게 활용하면 좋을지 살펴보겠다.DOM (Document Object Model) 이란?DOM 은 HTML 문서를 브라우저가 해석하여 생성하는 트리 구조의 객체 모델이다. 즉 웹페이지의 요소들을 JavaScript를 통해 조작할 수 있도록 해주는 역할을 해준다. 그러나 본래의 DOM 은 몇가지의 단점이 존재한다. DOM의 경우 변경이 많아질수록 브라우저의 렌더링 성능이 떨어진다.이는 비효율적인 업데이트를 하기 떄문인데, 요소 하나를 변경할 때..