본문 바로가기

React12

React useState Hook의 반환 값이 객체가 아닌 배열인 이유 1. 구문 간결성 객체를 사용하는 경우 객체의 속성을 개별적으로 추출 해야한다. 배열을 사용하는 경우에는 구조 분해 할당을 통해 간단하게 요소에 접근 할 수 있어 코드가 간결하고 가독성 있게 만들어준다. const user = { name: 'John', age: 30, city: 'New York' }; // 객체 속성 구조 분해 할당 const { name, age, city } = user; console.log(name); // 'John' console.log(age); // 30 console.log(city); // 'New York' const numbers = [1, 2, 3, 4, 5]; // 배열 요소 구조 분해 할당 const [first, second, third] = number.. 2023. 7. 4.
복합 컴포넌트 패턴(Compound Components Pattern) | 리액트 디자인 패턴 복합 구성요소 패턴(Compound Components Pattern) 이란? 프롭 드릴링(prop drilling) 없이 하나의 컴포넌트를 구성하는 State를 공유하도록 작성하는 컴포넌트 패턴이다. view를 구성하는 코드에 커스터마이징이 용이하다는 장점이 생긴다. import React, { useState } from "react"; const Test = () => { const [_value, _setValue] = useState("value2"); const optionChangeValue = (event) => { _setValue(event.target.value); }; return ( {_value} Label1 Label2 Label3 ); }; export default Test.. 2022. 12. 31.
속성 제어 패턴 (Control Props Pattern) | 리액트 디자인 패턴 속성 제어 패턴 (Control Props Pattern) 이란? 컴포넌트를 제어 컴포넌트(Controlled Component)로 변환한다. 외부 상태는 사용자가 컴포넌트의 기본 동작을 변경할 수 있도록 사용자 지정 로직 삽입을 허용하는 SSOT(Single Source Of Truth)로 사용된다. 컴포넌트를 제어 컴포넌트 란? component 의 상태를 제어할 수 있는 컴포넌트를 의미한다. SSOT 란, 정보와 스키마를 오직 하나의 출처에서만 생성 또는 편집하도록 하는 방법론입니다. 장점 더 많은 제어권을 부여 메인 state 가 컴포넌트 밖으로 드러나기 때문에 사용자는 직접적으로 그 컴포넌트를 제어할 수 있다. // app.jsx import "./styles.css"; import input .. 2022. 12. 31.
클라이언트 사이드 렌더링(CSR, Client Side Rendering) 클라이언트 사이드 렌더링(CSR, Client Side Rendering) 이란? 클라이언트(브라우저) 가 렌더링을 처리 하는 방식이다. 서버에서 받은 데이터를 통해 클라이언트인 브라우저가 모든 처리를 하게 된다. 사용자들의 PC성능의 향상으로 많은 처리 동작 들이 무리 없이 수행 할 수 있게 되며, 자바스크립트의 표준화가 잘 되어짐에 따라 React, Vue와 같은 CSR 프레임워크 라이브러리들이 나타나게 된다. 사이트에 접속 한다. 서버에서 index 파일을 받아온다 ( HTML 파일이 아무것도 없기 때문에, 빈 화면 ) html 파일에 링크되어 있는 모든 로직이 담겨있는 js 파일을 클라이언트로 요청한다. 받아온 js 파일로 인해 동적으로 html 사용자에게 보여지고 클릭 할 수 있게 된다. CSR.. 2022. 12. 28.
서버 사이드 렌더링(SSR, Server Side Rendering) 서버사이드 렌더링(SSR, Server Side Rendering) 이란? 클라이언트에서 모든 것을 처리하는 방식이 아닌 서버로부터 html 파일을 받아와 페이지 전체를 렌더링 하는 방식이다. (JSP/Servlet 아키텍쳐 방식) 사이트에 접속 한다. 서버에서 이미 만들어진 index 파일을 받아오게 되고, 사용자가 볼 수 있다. ( js를 받아오지 않아서 동적으로 제어 할 순 없다) ( TTV ) 자바스크립트 파일을 서버에서 받아온다. 동적인 구현 클릭이나 인터랙션이 가능하게 된다. ( TTI ) 사용자가 사이트를 볼 수 있는 시간과 인터랙션을 할 수 있는 시간에 대한 공백이 존재하는 편이다. 장점 첫번째 페이지에 해당하는 문서만 브라우저에 우선 전달하여 렌더링을 하기 때문에 첫 페이지 로딩 속도가 .. 2022. 12. 28.
아토믹 디자인 (Atomic Design) 개요 물질 순서로 화학의 개념을 웹에 적용하여, 인터페이스를 세분화한 디자인 시스템을 만드는 방법론 [출처] - Atomic Design Methodology 1. Atoms (원자) 원자는 모든 물질의 기본 구성 요소다. 각 원소마다 고유한 특성을 가지고 있으며, 더 이상 분해 할 수 없다. (가장 작은 단위) 2. Molecules (분자) 원자가 모인 원자의 그룹이다. 원자의 조합은 고유한 특성을 가지며, 원자보다 더 유동적인 작동이 가능하다. (원자의 그룹) 3. Organisms (유기체) 하나의 기능을 하는 분자들의 집합체이다. 이러한 유기체는 단순한 기능부터 매우 정교하고, 복잡한 기능이 있는 유기체에 이르기까지 다양하다. (분자의 그룹) 과학에서 나타나는 원자 - 분자 - 유기체 까지 의 .. 2022. 12. 27.
뷰 에셋 컴포넌트 (VAC, View Asset Component) 개요 JSX와 Style를 관리하여 UI와 비즈니스 로직을 분리하는데, 목적을 둔 컴포넌트 설계 방법론이다. Normal Pattern 특징 Business Logic과 UI 처리를 바인딩 하여 개발을 하게 된다. jsx, view logic, business logic 이 혼합(같이)하여 사용 FE 데이터 작업 과정에서 단순한 props 나 state 를 수정함에 있어서도, JSX 영역에 대한 수정이 필요하다. 이때, UI 처리와 바인딩 부분이 같은 페이지였을 경우, 영역 겹침으로 인한 코드 충돌이 발생한다. VAC Pattern 특징 view logic과 JSX 와 컴포넌트로 분리에 대한 가이드를 제공하는 디자인 패턴. 반복, 조건부 노출 등 스타일 제어 렌더링에 관련된 처리만 수행 props 를 통.. 2022. 12. 27.
[Study] nextJS 입문 - 노마드코더 강의 정리 복습 [ nextJS | 기초 ] 강의 URL - https://nomadcoders.co/nextjs-fundamentals Next JS 특징 React 라이브러리의 프레임워크 이다. Next.js 는 SPA와 SSR의 단점을 해결하기 위해서 리액트에 서버 사이드 렌더링(SSR) 기능을 더하여 SPA와 SSR의 장점을 가질 수 있게 됩니다. [작동 원리] - (SSR) Hydration - 빈 DOM 을 사용 하는것이 아닌 컴포넌트가 HTML 로 렌더링 된 후 빌드된 기존 DOM 에다 렌더링을 시키는 것. 브라우저에서 JavaScript를 다운로드하고 React를 실행함. 사용자, 페이지가 서로 상호 작용하여 다른 페이지로 이동할 땐, Server가 아닌 CSR방식으로 브라우저에서 처리함. SEO 검색 엔.. 2022. 11. 29.
[JavaScript] 서버사이드 렌더링 개념정리 서버사이드 렌더링 개념정리 출처 [ https://www.youtube.com/watch?v=iZ9csAfU5Os ] Sites history Static Sites ( 1990s ) 서버에 html 문서를 저장하고, 도메인 주소로 접속 시 , 그 html 문서를 보여주는 형식. 문제점 페이지 내의 다른 링크를 클릭 하면 서버에서 다시 해당 페이지 html 문서를 받아와서 업데이트를 해 출력 해주기에 사이트가 클 수록 사용성이 떨어진다. iframe ( 1996 ) 문서 내에서 또 다른 문서를 문서를 담을 수 있는 iframe 태그가 도입이 되었다. 부분적으로 문서를 받아와서 업데이트를 할 수 있게 되었다. XMLHttpRequest ( 1998 ~ ) fetchAPI의 원조이다. HTML 문서 전체가 .. 2022. 11. 28.
728x90