본문 바로가기

리액트6

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.
[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