React

요 며칠간 React에서 사용하는 문법과 주요기능에 대해서 전반적으로 공부한 내용을 정리해 보았습니다. 아래 글 내용은 React+Next.js를 기준입니다.의외로 직관적이어서 어렵지 않다는 느낌을 받았는데 실제 애플리케이션을 만들면 또 다른느낌이겠죠.React는 Fa

어느정도 React문법에 익숙해졌다면 React스타일에 맞추어 효율적인 코드를 작성할 수 있는 방법을 알아보자. 내용은 21 Best Practices for a Clean React Project에 있는 블로그를 번역했고 나름대로 이해한 내용을 추가로 설명을 덧붙였다

개요 React 애플리케이션에서 상태관리는 어려운 작업이다. 특히 루트구성 요소에서 깊게 중첩된 구성요소로 데이터를 전달해야 할때 많은 경우 코드가 지나치게 복잡해지고 불필요한 중복이 발생하게 된다. 이러한 문제(prop drilling)해결을 위해 구성요소트리 아래로

예를 들어 사용자의 프로필정보를 보여주는 UI 컴포넌트를 개발하고 있다고 하자. UI에는 사용자의 이름, 프로필 사진, 그리고 몇 가지 추가 정보(예: 이메일, 전화번호 등)가 포함한다고 가정한다.초기에는 각 정보를 개별 props로 전달하여 중첩된 컴포넌트로 구성되어

React의 Context API는 전역 데이터(예: 사용자 인증 정보, 테마, 언어 설정 등)를 관리하고 컴포넌트 트리 전체에 걸쳐 쉽게 접근할 수 있게 해주는 방법을 제공한다. 이는 prop drilling(하위 컴포넌트로 props를 계속 전달하는 것)을 피하기

React에서 API데이터를 가져오는 네 가지 방법을 살펴보고 로딩상태관리, 오류처리, 경합조건방지(AbortController)에 대해 알아본다.Fetch API를 Promise와 함께 활용하여 API에서 데이터를 취득한다. 이방법은 가장 단순한 방법이며 Promis

이글은 아래 링크를 번역한 글입니다.원문은 여기(영문)React에서는 Hooks을 사용함으로서 코드가 자연스러워진다. Hooks는 함수형프로그래밍에서는 클래스를 대체하는 특별한 함수이다.객체지향보다는 기능지향으로 접근더 선형적 → 코드 복잡성 감소예측할 수 없는 버그방

복잡성 해결 기능적 구성 요소가 실제로 하나의 기능으로 작성되었지만 다른 기능과 마찬가지로 다른 기능으로 구성될 수도 있다는 점을 인식해야 합니다. 모든 useState, useEffect, 기타 후크 또는 하위 구성 요소는 그 자체로 함수일 뿐입니다. 따라서 우리는

Layout Components는 애플리케이션의 레이아웃을 정의하는 컴포넌트입니다. 일반적으로 Header, Footer, Sidebar, Main Content 영역 등을 포함합니다.Controlled Components는 폼 요소의 상태를 React 컴포넌트가 제어

맥용 단축키정리입니다.