본문 바로가기

STUDY/REACT8

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.
[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.
[React] ReactHook ReactHook 저번 학습에서는 함수형 클래스형 컴포넌트의 구조를 파악하고 모양을 확인했다면, 이번 시간에는 그 틀안에서의 리액트를 사용함에 있어서 가장 중요하다고 생각하는 ReactHook에 대해서 알아보려고 한다. 그 중에서도 ko.reactjs.org 홈페이지에 나오는 기본 훅들을 간단하게 설명 하고 넘어갈 생각이다. Hook은 기존 Class 바탕의 코드를 작성할 필요 없이 state(상태 값)과 여러 React의 기능을 편리하게 사용하게 해주는 기능이다. 1. useState (StateHook) useState는 Hook 개념에서 가장 처음 배우고 접하게 되는 함수다. 리액트 컴포넌트 안에서 state, 상태들을 관리해야하는 일이 있을때, class 없이 간편하게 사용 할 수 있도록 한다. .. 2022. 11. 25.
[React] 컴포넌트 특징 컴포넌트 특징 저번 학습에서 전체적인 틀 컴포넌트 방식등의 구조를 찾아봤다면 이번학습에서는 실제로 코드를 입력해보며, 구조를 파악해보려고 한다. Reactjs code snippets *[VS CODE]**에서 리액트 확장 플러그인 설치 해당 코드 스니펫을 설치하게 되면 js 파일 내에서 사용이 가능하게 된다. 트리거 + Tab 키로 React 기본 뼈대를 만들 수 있다. 기본(보편)적으로 쓰이는 건 함수형과 클래스형인거 같다. 1. 클래스형 컴포넌트 : rcc + Tab key 2. 함수형 컴포넌트 : rsc + Tab key 1. 클래스형 컴포넌트 과거에 주로 사용했지만 함수형 컴포넌트에 hook을 지원하면서, 공식 문서에서는 함수형 컴포넌트와 훅을 같이 사용하기를 권장 하고 있다. 클래스형 컴포넌트.. 2022. 11. 25.
[React]구조파악하기 리액트 구조 React를 설치시 여러 폴더 및 파일들이 설치가 됩니다. 리액트가 설치 되었을때 보여지는 폴더 구조 디렉토리 종류로는 node_modules : 모듈 패키지들이 위치 하는 폴더이다. 'npm install / yarn' 을 통해 설치를 할 수 있다. node를 통해 package.json 안에 저장 된 패키지들을 불러 올 수도 있다. public : static 자원폴더, 실제 html이 구현 되는 폴더로 보면 편하다. 리액트는 가상DOM 을 이용하여 부분 부분 나눠서 구현을 하는데, 그 부분에서 실제 DOM 역할을 해주는 html이 있는 폴더다. src : 리액트 개발을 하는데 사용하는 폴더이다. 이 부분이 리액트에서의 메인이고, 이 폴더에서 파일을 작성하고 수정하고 한다. 1. Publ.. 2022. 11. 25.
[React]시작하기 리액트란? 리액트는 페이스북에서 만든, 사용자 인터페이스를 만들기 위해 사용되는 자바스크립트 라이브러리이다. 출처 : 위키백과 리액트의 대표적인 특징 JSX 문법 (JavaScript eXtension) 사용 React에서 HTML을 표현할 때, JSX를 사용한다. 외관상 HTML같은 마크업 언어를 리터럴로 입력하는 것으로 보이는데, 빌드 시 Babel에 의해 자바스크립트로 변환된다. 자바스크립트 코드를 HTML처럼 표현할 수 있기 때문에 용이한 개발이 가능하다. Component 기반 컴포넌트(Component)는 프로그램에 있어서 재사용이 가능한 각각의 독립 모듈이다. 소프트웨어 시스템에서 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지 보수 하는데 있어서 일부분 교체가 가능하도록 만든 기술이다... 2022. 11. 25.
728x90