reactjs6 React 상태 관리: 깊이 있게 파헤치기 왜 상태 관리가 필요할까?React 컴포넌트는 자체적인 상태를 가지고 있지만, 앱의 규모가 커지고 컴포넌트 간의 상호 작용이 복잡해질수록 단순한 상태 관리로는 한계가 드러납니다. 이러한 문제를 해결하기 위해 상태 관리 라이브러리나 패턴을 활용합니다.Props Drilling: 깊은 계층의 컴포넌트에 데이터를 전달하기 위해 중간 컴포넌트들을 거쳐야 하는 문제글로벌 상태 관리: 앱 전역에서 사용되는 데이터를 효율적으로 관리하기 어려움복잡한 상태 업데이트 로직: 상태 변화에 따라 여러 컴포넌트를 업데이트해야 할 때 로직이 복잡해짐상태 관리 라이브러리 종류Redux: 가장 대표적인 상태 관리 라이브러리로, 예측 가능한 상태 흐름을 제공하고 중앙 집중식으로 상태를 관리합니다.Context API: React의 기.. 2024. 11. 10. React 19 RC 버전: 더욱 강력해진 React 개발 경험 React 19 RC(Release Candidate) 버전이 출시되면서, React 개발자들에게 새로운 기능과 향상된 성능을 선사했습니다. 이번 포스팅에서는 React 19 RC의 주요 특징과 장점, 그리고 각 기능별 설명을 자세히 살펴보도록 하겠습니다.1. 서버 컴포넌트와 서버 액션React 19는 서버 컴포넌트와 서버 액션을 통해 서버로부터 데이터를 가져오거나 변경하는 기능을 추가했습니다. 이를 통해 더욱 효율적인 데이터 관리와 사용자 경험을 제공할 수 있습니다.서버 컴포넌트: 서버에서 렌더링된 HTML을 클라이언트에 전달하여 초기 페이지 로딩 속도를 향상시킵니다.서버 액션: 서버에서 데이터를 변경하거나 비즈니스 로직을 실행하는 기능을 제공합니다.// 서버 컴포넌트export async functi.. 2024. 11. 9. [공식문서] React 배우기 - UI 구성하기 React는 사용자 인터페이스(UI)를 렌더링하기 위한 JavaScript 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트부터 휴대폰 앱까지 화면의 모든 것을 컴포넌트로 분류할 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 사용자 정의하고, 조건부로 표시하는 방법을 배웁니다. 이 챕터에서 다룰 내용 첫 번째 React 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 생성하는 시기와 방법 JSX로 JavaScript에 마크업을 추가하는 방법 JSX와 함께 중괄호를 사용해 컴포넌트에서 JavaScript 기능에 엑세스하는 방법 prop으로 컴포넌트를 구성하는 방법 컴포넌트를 .. 2023. 9. 22. [공식문서] React - React로 사고하기 React는 디자인을 바라보는 방식과 앱을 빌드하는 방식을 바꿀 수 있습니다. React로 사용자 인터페이스를 빌드할 때는 먼저 컴포넌트라고 하는 조각으로 분해합니다. 그런 다음 각 컴포넌트에 대해 서로 다른 시각적 상태를 기술합니다. 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. 이 튜토리얼에서는 React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내합니다. mockup으로 시작하기 이미 JSON API와 디자이너의 목업이 있다고 가정해 보겠습니다. JSON API는 다음과 같은 데이터를 반복합니다. [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { category: "Fruits", price.. 2023. 9. 17. [공식문서] React - 튜토리얼: Tic-Tac-Toe 이 튜토리얼에서는 React를 사용하여 작은 틱택토 게임을 만들 것입니다. 이 튜토리얼은 기존의 React 지식을 가정하지 않습니다. 튜토리얼에서 배울 기술은 모든 React 앱을 구축하는 데 필수적이며 완전히 이해하면 React에 대한 심도 있는 이해를 얻을 수 있습니다. 참고 이 튜토리얼은 직접 해보며 학습하고 무언가 구체적인 것을 빠르게 만들어 보기를 선호하는 사람들을 위해 설계되었습니다. 각 개념을 단계별로 배우는 것을 선호하는 경우 "UI 설명"부터 시작하십시오. 이 튜토리얼은 다음 섹션으로 나뉩니다: 튜토리얼을 위한 설정: 튜토리얼을 따라갈 수 있는 시작점을 제공합니다. 개요: React의 기초인 컴포넌트, 프롭스(props), 상태(state)를 가르칩니다. 게임 완성: React 개발에서 .. 2023. 9. 16. [공식문서] React - Quick Start React 문서에 오신 것을 환영합니다! 이 페이지에서는 React 개념 중 일상적으로 사용하는 80%에 대한 소개를 제공합니다. 여러분은 다음을 배우게 됩니다. 컴포넌트를 만들고 중첩하는 방법 마크업과 스타일 추가 방법 데이터를 표시하는 방법 조건과 목록을 렌더링하는 방법 이벤트에 응답하고 화면을 업데이트하는 방법 컴포넌트 간 데이터 공유 방법 컴포넌트 만들기 및 중첩하기 React 앱은 컴포넌트로 구성됩니다. 컴포넌트는 자체 로직과 외형을 가진 UI(사용자 인터페이스)의 일부입니다. 컴포넌트는 버튼처럼 작을 수도 있고 페이지 전체처럼 크게 만들 수도 있습니다. React 컴포넌트는 마크업을 반환하는 JavaScript 함수입니다. function MyButton() { return ( I'm a bu.. 2023. 9. 16. 이전 1 다음
