왕가's history

useState Component가 가지고 있는 상태값으로 컴포넌트 내부에서의 동적 데이터입니다. 흔히 많이 사용되는 변수라고 생각하면되지만, 아래와같은 특징이 있기 때문에 변수랑은 느낌만 같지 많이 다릅니다. const [변수이름, set변수이름] = useState(초기값); set변수이름은 다른 이름을 넣어도 되고, 선언하지 않아도 상관없습니다. 변수에 값을 직접 대입하는 것이 아니라, set을 통해 값을 대입해줍니다. state값이 변하게 되면 UI가 리렌더링 된다. useState는 비동기로 동작한다. 예 HTML 삽입 미리보기할 수 없는 소스 input태그의 값을 입력해 주면서 content라는 state값을 확인할 수 있게 작성하였다. content선언할 때는 "" 빈문자열로 초기값을 설정해..

Props properties의 줄임말로, Component가 가지고 있는 속성값입니다. (HTML에서의 attribute와 같음) Component끼리 (부모 컴포넌트 → 자식 컴포넌트) 데이터를 전달할 수 있게 해 줍니다. 기본적으로는 부모에서만 props의 값을 변경할 수 있지만, 자식에서 값을 부모로 넘겨 부모에서의 값도 바꿀 수 있습니다. 예 HTML 삽입 미리보기할 수 없는 소스 값 전달 Title 컴포넌트 HelloWorld에서 language를 kor로 하여 Title컴포넌트에 props로 넘기게 됩니다. Title2 컴포넌트 HelloWorld에서 language와 name 두 가지 props를 전달하였고, Title2에서는 구조분해할당으로 language(변수), name(콜백함수) 값..

Import React환경에서 개발하다 보면 여러 개의 모듈을 필요하게 되는데, 외부 라이브러리, 컴포넌트, css 등 다양한 모듈을 사용하기 위해 사용됩니다. import 식별자(변수, 함수, 클래스) from 경로(ex ”./Page”) import React from "react"; import Page003, { Page001, Page002, ErrorPage } from "./MultiPage"; export default function App() { return ( ); } export 개발한 모듈을 다른 모듈을 에서 사용하기 위해서는 해당 모듈에서 export 해야 다른 곳에서 import 할 수 있습니다. export 하는 방법은 여러 가지 방법이 있으며, 프로젝트 코드컨벤션 진행할 때..

Component 화면 개발을 진행할 때, 전체 페이지를 한 번에 그리게 되면, 하나의 소스파일에 많은 양의 코드가 작성되게 됩니다. 이를 방지하기 위해 UI를 재사용할 수 있도록 소스를 여러 조각으로 나눠서 작성하여 가져다 쓰게 되는데 이를 Component(컴포넌트)라고 합니다. Component를 나누는 범위는 상황에 따라 다르며, 버튼하나까지도 나눠서 사용할 수 도 있습니다. 개발자의 능력이라고 보시면 됩니다. 이렇게 나눈 여러 개의 Component를 모아 한 개의 페이지로 만들게 됩니다. React에서 제공하는 Component 방식이Class Component와 Function Component 2가지 방식이 있지만, 주로 Function Component를 사용하며, Class Compon..

JS런타임 환경인 노드(Node.js)의 패키지(npm에 업로드된 Node module) 관리자입니다. 개발 중 다양한 패키지를 사용하기 위해 다운로드, 설치 업데이트, 의존성 등 복잡한 상황이 생기기 마련인데, 자동화하여 편리하고 안전하게 관리해 주게 됩니다. npm Node Package Manager로 Node.js의 기본 패키지 관리자입니다. 사람들이 노드 패키지를 만들고, 업로드하며 공유할 수 있는 공간으로 누구나 게시된 패키지를 사용할 수 있습니다. https://www.npmjs.com/ yarn 페이스북에서 개발한 패키지 관리자입니다. npm과 같은 기능을 수행하나 속도나 안정성 측면에서 향상되어 npm에서 보완된 패키지관리자라고 할 수 있습니다. https://classic.yarnpkg..

React 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. (최근에는 주로 TypeScript로 구현) Web에만 있는 것은 아니며 모바일에서는 React Navive, 가상 App에서는 React 360 등이 사용된다고 합니다. 이벤트가 발생하여 DOM의 상태가 바뀌었을 때, 특정 DOM을 업데이트하기보다는 처음부터 다시 화면을 그림으로써, 업데이트할 때 복잡한 로직 등 고민할 것이 사라지게 됐습니다. 대신 화면은 전부 새로 그리기 때문에 속도가 굉장히 느릴 것으로 예상되며, 이를 해결하기 위해 가상 DOM (Virual DOM)을 사용됩니다. 가상 DOM 실제 보이는 DOM이 아니라 메모리에 가상으로 존재하는 DOM으로 JS객체이기 때문에 성능이 실제 브라우저보다 훨씬 빠릅니다...