728x90 Front-End20 리액트 컴포넌트 패턴: 프레젠테이션 vs 컨테이너 리액트 애플리케이션을 개발할 때, 컴포넌트를 어떻게 구성하고 관리할지에 대한 선택은 중요합니다. 이 글에서는 리액트 컴포넌트의 두 가지 주요 패턴인 "프레젠테이션 컴포넌트"와 "컨테이너 컴포넌트"에 대해 알아보겠습니다. 프레젠테이션 컴포넌트 프레젠테이션 컴포넌트는 주로 UI를 렌더링하는 데에 집중합니다. 이러한 컴포넌트는 데이터나 상태 관리보다는 UI 요소의 표현에 관심이 있습니다. 주로 함수형 컴포넌트로 작성되며, props를 통해 데이터를 받아들이고 UI를 렌더링합니다. import UserItem from './UserItem' import './UsersList.css' const UsersList = (props) => { if (props.items.length =.. 2024. 2. 19. React Router v5에서 v6로의 업그레이드: API 단순화와 새로운 기능 소개 react-router-dom v5 → v6 react-router-dom v5 import { BrowserRouter, Route, Redirect, Switch } from 'react-router-dom'; Switch: Switch 컴포넌트는 그 안에 포함된 Route 중에서 첫 번째로 매칭되는 경로만 렌더링합니다. 여러 Route 중에서 하나만 렌더링하고자 할 때 사용합니다. 일반적으로 정확한 경로 매칭을 위해 사용됩니다. Route: Route 컴포넌트는 URL 경로와 컴포넌트를 매핑합니다. 특정 URL 경로가 요청되었을 때 해당 경로에 매칭되는 컴포넌트를 렌더링합니다. path prop을 통해 URL 경로를 지정하고, component 또는 render prop을 통해 렌더링할 컴포넌트를 .. 2024. 2. 15. useState() 리액트 상태 관리 마스터하기 1. useState 사용하지 않을때는? const App = () => { // 배열선언 const courseGoals = [ { id: 'cg1', text: 'Finish the Course' }, { id: 'cg2', text: 'Learn all about the Course Main Topic' }, { id: 'cg3', text: 'Help other students in the Course Q&A' } ]; // 배열안에 값 추가하는 이벤트 선언 const addNewGoalHandler = newGoal => { courseGoals.push(newGoal); console.log(courseGoals); }; return ( Course Goals ); }; NewGoal 컴포넌트.. 2024. 2. 13. React 동작 과정 React 동작 설명 1. React 대화형 사용자 인터페이스를 구축하기 위한 Javascript 라이브러리로 사용자 인터페이스를 구축하기 위한 선언적이고 효율적인 방법을 제공합니다. 1-1. 라이브러리 이란? React가 UI를 구축하는데 유용한 기능(API)을 제공하지만 애플리케이션에서 이러한 기능을 사용할 위치는 개발자에게 맡긴다는 의미를 나타낸다 2. 사용자 인터페이스 UI 렌더링 사용자가 웹페이지를 방문하면 서버는 다음과 같이 HTML 파일을 브라우저에 반환한다. 브라우저는 HTML 을 읽고 DOM(문서 개체 모델)을 구성한다 2-1. DOM 이란? DOM 은 HTML 요소의 객체 표현이다. 코드와 사용자 인터페이스 사이의 브리지 역할을 하며 상위 및 하위 관계가 있는 트리와 같은구조를 갖는다 .. 2024. 1. 8. React18 변경한 부분 React18 변경점 1. useTransition 블로킹 렌더링 문제 한번 렌더링 연산이 시작되면 멈출수 없음 대형 화면 업데이트의 경우 렌더링 되는 동안 페이지 지연이 발생 Blocking useTransition: useTransition 이전과 다르게 끊김없이 응답하는것이 보여진다. useTransition: isPending isPending 사용해서 Pending 상태를 나타낼수 있다. debounce debounce 상태면 사용자 입력후에 일정시간뒤에 화면이 업데이트 된다. 만약 사용자 입력이 길어진다면? 사용자 업데이트는 계속 지연되게 된다. throttle throttle 이용해서 3초주기로 화면을 그리게 된다면? 그런데 3초동안 계속입력하지 않고 뛰엄뛰엄 입력을 하게 된다면? 의미없이 .. 2023. 12. 1. Web_components with Lit Web Components 와 Lit 개념과 사용법 이제는 웹 개발에서 코드 재사용이 얼마나 중요한지를 모두가 알고 있습니다. 그러나 사용자 정의 UI 컨트롤을 만들거나 웹 페이지의 구조를 복잡하게 만들지 않고 코드를 재사용하는 것은 전통적으로 어려웠습니다. 사용자 정의 마크업 구조를 렌더링하려면 복잡한 HTML, 스타일 및 스크립트를 작성해야 했으며, 이를 여러 번 사용하면 페이지가 혼란스럽게 엉망이 될 수 있었습니다. 하지만 여기에 해결책이 있습니다 - Web Components입니다. Web Components는 코드 충돌을 걱정하지 않고 재사용 가능한 UI 컴포넌트를 만들 수 있도록 도와주는 기술 집합으로, 세 가지 핵심 기술로 구성됩니다. 1. Custom Elements (사용자 정의 요소):.. 2023. 11. 8. 이전 1 2 3 4 다음 728x90
