728x90 Front-End/React6 리액트 컴포넌트 패턴: 프레젠테이션 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. React 렌더링 React 렌더링 1. 렌더링 이란? React 애플리케이션은 컴포넌트라고 불리는 작은 조각들로 구성됩니다. 각 컴포넌트는 상태(State)와 속성(Properties)을 기반으로 UI를 렌더링하게 된다. 렌더링은 상태나 속성이 변경될 때 해당 컴포넌트를 갱신하고, 변경된 내용을 화면에 반영하는 프로세스를 포함한다. 함수 function MyComponent() { return ( Hello, Virtual DOM! This is a virtual DOM example. ); } 리액트 함수 문법으로 컴포넌트를 작성을 한다 VirtualDOM(객체) const virtualDOM = { type: 'div', props: { id: 'myDiv', className: 'container', childre.. 2023. 9. 23. 이전 1 다음 728x90
