왕가's history

Strict Mode production환경에서 일어날 수 있는 오류를 React에서 잡아주기 때문에 사용됩니다. Strict Mode가 켜져 있는 상태이면, 개발 중에 React는 실제 설정 전에(setup - cleadnup) 한 번 더 실행하게 됩니다. 이는 올바르게 구현되었는지 확인하기 위함이며, 두번 일어났는데, 결괏값이 서로 다르면 해당 코드는 문제가 있다는 것을 파악할 수 있습니다. 개발 모드에서만 활성화 되기 때문에 production에서는 영향이 없음 CRA로 프로젝트 생성시 default로 태그가 달려 있음 import React from 'react'; function ExampleApplication() { return ( ); } React.StrictMode로 감쌀 수 있다. 혹..

React를 사용했을 때, 화면이 그려지는 동작 순서와 화면을 다시 그리게 되는 리렌더링 순서입니다. Mount (마운트) 컴포넌트가 생성되어 렌더링 되는 과정을 마운트라고 하며, 렌더링 된 컴포넌트가 삭제되는 과정을 Unmount(언마운트)라고 합니다. 함수 컴포넌트 호출 구현부 실행 props 전달받고, hook 내부 변수, 함수 생성. (내부 변수 및 함수는 hook에 있는 state나 function을 제외. 이들은 별도로 메모리에 저장되어 관리함.) 가상 DOM을 생성 커밋 실제 DOM에 반영 useLayoutEffect 화면에 Paint 하기 전에, useLayoutEffect에 등록해 둔 effect '동기'로 실행된다. 실제로 해당 훅은 잘 사용하지 않는 것으로 알고 있음. 공식 문서를 확..

useEffect Side-Effect를 처리하기 위한 Hook입니다. Side-Effect : 함수가 실행되면서 함수 외부에 존재하는 값이나 상태를 변경시키는 등의 행위로, 렌더링 된 이후 비동기로 처리되어야 하는 부수적인 것들을 지칭 uesEffect(() ⇒ { … } ,[deps]) 두 번째 인자인 deps에 state값을 넣고, state값이 변할 때마다 해당 useEffect를 실행. 빈 배열로 입력할 경우, 렌더링 후 1번만 실행. 종속성 배열을 아예 지정하지 않았을 경우, 리렌더링 될 때마다 실행. useEffect가 실행되는 시점은 렌더링 결과가 DOM에 반영될 때, 컴포넌트가 사라지기 직전 마지막으로 호출됩니다. 2023.06.20 - [Front-End/React] - React 동작..

Hook React에서 함수형 컴포넌트를 사용 시, state와 다른 React 기능들을 사용할 수 있게 해 줌. 주의 사항 Hook은 최상위, 함수의 제일 바닥에서만 사용해야 한다. 반목문, 조건문, Hook 내부 등에서 호출하면 안 된다. Hook은 React 함수 내에서 사용 Custom Hook에서 Hook을 호출할 것 Hook은 호출되는 순서가 중요하다. React에서 제공해 주는 여러 기능들? 함수들?로 보면 될 것 같습니다.

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

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