개발노트

useEffect useEffect는 React의 훅(Hook) 중 하나로, 컴포넌트가 렌더링될 때나 특정 상태가 변경될 때 특정 작업을 수행할 수 있도록 도와줍니다. useEffect를 사용하여 컴포넌트의 생명주기 메서드나 사이드 이펙트 로직을 작성할 수 있습니다. import React, { useEffect } from 'react'; function MyComponent() { useEffect(() => { // 컴포넌트가 마운트될 때 실행되는 작업 console.log('컴포넌트가 마운트됨'); return () => { // 컴포넌트가 언마운트될 때 실행되는 작업 (정리(clean-up) 함수) console.log('컴포넌트가 언마운트됨'); }; }, []); useEffect(() =>..

Create React App은 React 애플리케이션을 빠르고 간단하게 설정할 수 있는 공식적인 도구입니다. 이 도구는 React 애플리케이션을 구성하는 데 필요한 모든 설정 및 빌드 작업을 자동화하여 개발자가 더욱 편리하게 개발할 수 있도록 도와줍니다. Create React App을 사용한 React JS개발 특징 제로 구성: Create React App은 초기 설정과 빌드 설정에 대한 복잡한 작업을 최소화합니다. 개발자는 바로 React 애플리케이션을 작성하고 실행할 수 있습니다. 설정 파일을 작성하거나 환경을 구성할 필요가 없습니다. 개발 서버: Create React App은 개발 서버를 제공하여 애플리케이션을 개발하는 동안 빠르고 쉽게 변경 사항을 확인할 수 있습니다. 파일이 수정될 때마다..

Props ReactJS에서 props는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터를 나타냅니다. Props는 컴포넌트 간에 데이터를 효율적으로 전달하고 상태를 공유하는 데 사용됩니다. Props는 부모 컴포넌트에서 자식 컴포넌트로 일방적으로 전달됩니다. 부모 컴포넌트에서 자식 컴포넌트로 전달된 props는 자식 컴포넌트 내에서 읽기 전용으로 사용됩니다. 즉, 자식 컴포넌트는 props 값을 변경할 수 없고, 오로지 읽기만 가능합니다. Props를 사용하여 컴포넌트에 데이터를 전달할 수 있습니다. 이 데이터는 문자열, 숫자, 불리언, 객체, 배열 등 다양한 형태일 수 있습니다. 부모 컴포넌트에서 자식 컴포넌트로 props를 전달할 때, 자식 컴포넌트에서 해당 props를 사용하여 UI를 동적으로..

State에 들어가기 앞서 구조 분해 할당을 이해해야합니다. Dstructuring assignment(구조 분해 할당) 구조 분해 할당을 통해 배열이나 객체의 요소를 변수로 추출할 수 있습니다. 이때 추출된 변수들은 할당 연산자(=)를 사용하여 우측의 배열이나 객체에서 해당 위치 또는 속성의 값을 가져옵니다. 구조 분해 할당은 배열이나 객체의 일부분만을 추출할 수도 있습니다. 이때는 추출하지 않을 요소는 쉼표(,)로 무시하면 됩니다. 1. 배열 구조 분해 할당 (Array) const array = [1, 2, 3]; // 기존 방식 const a = array[0]; const b = array[1]; const c = array[2]; // 구조 분해 할당 const [a, b, c] = array..

React JS 는 javascript를 더 간편하기 사용하기 위해 도움을 주는 라이브러리입니다. 메타(페이스북)에서 개발했으며, 가상 DOM(virtual DOM)을 사용하여 웹 성능을 향상시킵니다. 컴포넌트 개발방식으로 재사용이 가능하도록 모듈화된 코드를 작성할 수 있도록 도와줍니다. 특징. 컴포넌트 React 애플리케이션은 컴포넌트의 조합으로 이루어집니다. 컴포넌트는 재사용 가능하며 독립적인 코드 단위입니다. 각 컴포넌트는 자체적인 상태(state)와 속성(properties)을 가질 수 있습니다. JSX React에서는 JSX라는 문법을 사용하여 JavaScript 코드 안에 HTML과 비슷한 구문을 작성할 수 있습니다. JSX는 가독성이 높고 컴포넌트의 구조를 명확하게 표현할 수 있는 장점이 있..

forEach는 배열의 각 요소에 대해 반복적으로 작업을 수행하기 위한 배열 메서드입니다. forEach 메서드는 콜백 함수를 사용하여 배열의 각 요소에 대해 작업을 수행합니다. 1. forEach 사용법 array.forEach(callback(currentValue, index, array), thisArg); array: 반복 작업을 수행할 배열입니다. callback: 각 요소에 대해 실행될 콜백 함수입니다. currentValue: 현재 처리 중인 요소의 값입니다. index (선택적): 현재 처리 중인 요소의 인덱스입니다. array (선택적): forEach 메서드를 호출한 배열입니다. thisArg (선택적): 콜백 함수 내에서 this로 사용할 객체입니다. 2. 다양한 forEach 작성..

preventDefault() preventDefault는 이벤트의 기본 동작을 취소하는 메서드입니다. 이벤트가 발생했을 때 기본 동작을 수행하지 않도록 막는 데 사용됩니다. 일반적으로, 웹 페이지에서 발생하는 이벤트(예: 링크 클릭, 폼 제출 등)는 기본 동작이 정의되어 있습니다. preventDefault 메서드는 이벤트 객체의 메서드로 호출됩니다. 일반적으로 이벤트 핸들러 함수 내에서 사용됩니다. 로그인 위의 예시에서 handleSubmit 함수는 submit 이벤트를 처리하는 핸들러입니다. event.preventDefault()를 호출하여 기본 동작인 폼 데이터의 서버 전송과 페이지 새로고침을 중지시킵니다. 그 후, 폼 데이터를 수집하고 처리하는 등의 추가 동작을 수행할 수 있습니다. 이를 위해..

요소의 클래스를 추가하거나 제거하기 위해 classList 속성을 사용할 수 있습니다. classList는 클래스를 조작하는 여러 메서드를 제공합니다. 1. 클래스 추가하기 classList.add() 메서드를 사용하여 요소에 클래스를 추가할 수 있습니다. // 요소 선택 var element = document.getElementById('myElement'); // 클래스 추가 element.classList.add('myClass'); 위의 코드에서 add() 메서드를 사용하여 myElement 요소에 myClass 클래스를 추가합니다. 2. 클래스 제거하기 classList.remove() 메서드를 사용하여 요소에서 클래스를 제거할 수 있습니다. // 요소 선택 var element = docum..

Javascript에서 createElement()와 appendChild() 를 사용한다면 HTML에 직접 태그를 작성하지 않고 요소를 생성하여 추가할 수 있습니다. 또한, remove() 로 요소를 삭제 할 수 있으며, setAttribute()로 속성 값을 수정할 수 있습니다. 1. 요소 추가하기(CreateElement, appendChild) // 부모 요소 선택 var parentElement = document.getElementById('parent'); // 새로운 요소 생성 var newElement = document.createElement('div'); newElement.textContent = '새로운 요소'; // 부모 요소에 새로운 요소 추가 parentElement.app..

로컬 스토리지(Local Storage)는 웹 브라우저에서 제공하는 클라이언트 측 웹 스토리지 기능으로, 작은 데이터를 사용자의 로컬 컴퓨터에 영구적으로 저장할 수 있습니다. 자바스크립트의 localStorage 객체를 사용하여 로컬 스토리지에 데이터를 저장하고 검색할 수 있습니다. 1. 값 저장 // 로컬 스토리지에 데이터 저장 localStorage.setItem('username', 'John'); // 객체 형태의 데이터 저장 var user = { name: 'Jane', age: 25, }; localStorage.setItem('user', JSON.stringify(user)); 위의 코드에서 setItem 메서드를 사용하여 'username' 키로 'John' 값을, 'user' 키로 u..