둥지

리액트에서 컴포넌트는 생명 주기를 갖습니다.생명 주기란 컴포넌트가 생성되고 사용되고, 소멸되는 과정을 뜻합니다. 함수 컴포넌트에서 생명 주기는 크게 3가지 단계로 구분할 수 있습니다.렌더 (Render)커밋 (Commit)클린업 (Cleanup)이 세 단계를 각각 설명하자면 다음과 같습니다.렌더함수 컴포넌트가 호출되어 JSX가 반환됨.side effect가 호출되지 않음.커밋실제 DOM에 변화가 적용되는 단계.useEffect가 호출되는 단계.클린업컴포넌트가 언마운트되거나, useEffect가 다시 실행되기 전 정리 작업을 수행하는 단계.useEffect의 cleanup이 호출되는 단계. 이 단계를 간단히 아래의 코드로 살펴볼 수 있습니다.import React from 'react';function C..

1. Props란?Props란 컴포넌트 간에 데이터를 전달하기 위해 사용됩니다.부모 컴포넌트에서 자식 컴포넌트로 단방향으로 데이터를 전달할 때 사용되며, 자식 컴포넌트는 전달 받은 `props`를 읽기 전용으로 사용하게 됩니다. 2. State란?State란 컴포넌트 내부에서 관리되는 상태를 나타냅니다.상태가 변경되면 컴포넌트는 리렌더링이 일어나게 됩니다.컴포넌트 외부에서는 직접 접근할 수 없습니다. 3. 그렇다면 Props와 State의 차이점은 무엇이 있을까?데이터의 소유와 제어Props: 부모 컴포넌트가 소유하고 제어함.State: 해당 컴포넌트 내부에서 소유하고 제어함.변경 가능성Props: 읽기 전용.State: 컴포넌트 내에서 업데이트 가능.데이터 흐름Props: 부모에서 자식으로 단방향.St..

Electron에 바벨을 셋팅하려는데 최신 정보가 잘 없어 정리하게 되었습니다. 먼저 일렉트론에 바벨을 셋팅하려면 노드가 설치되어 있어야합니다. 노드는 이미 설치되어 있다고 가정하고 넘어가겠습니다. 먼저 프로젝트를 먼저 생성해야겠죠? 아래의 명령어를 입력합니다. npm init -y 다음으로 일렉트론을 설치합니다. 다음의 명령어를 콘솔에 입력합니다. npm i -D electron 다음으로 바벨설정하기 위해 필요한 라이브러리들을 설치합니다. npm i -D @babel/cli @babel/core @babel/preset-env @babel/register 그리고 .babelrc 파일을 만들어 아래의 내용을 입력합니다. { "presets": ["@babel/preset-env"] } 이번엔 일렉트론을 ..