FrontEnd/React

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.생명주기(Lifecycle)컴포넌트가 생성되고, 업데이트되며, 제거되는 과정을 설명하는 개념입니다.   1-1.마운트 (Mount)마운트는 컴포넌트가 처음으로 DOM에 삽입될 때 발생합니다. 이 과정은 컴포넌트가 생성되고 렌더링되어 화면에 표시되기까지의 일련의 작업을 포함합니다.import React, { useEffect } from 'react';function MyComponent() { useEffect(() => { console.log('컴포넌트가 화면에 나타났습니다.'); // 반환 함수는 언마운트 시 호출됩니다. return () => { console.log('컴포..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.리액트 훅(Hooks)함수형 컴포넌트에서 상태와 생명주기 기능을 사용할 수 있도록 하는 기능입니다.클래스형 컴포넌트에서 사용되던 많은 기능들을 함수형 컴포넌트에서도 사용할 수 있게 해주며, 코드의 재사용성을 높이고 컴포넌트 구조를 단순화하는 데 도움을 줍니다.  2.주요 리액트 훅useState: 상태 변수를 선언하고 관리합니다.useEffect: 사이드 이펙트를 처리합니다. useContext: 컨텍스트를 사용하여 전역 상태를 관리합니다.useReducer: 복잡한 상태 로직을 관리합니다.useCallback: 함수를 메모이제이션하여 성능을 최적화합니다.useMemo: 값을 메모이제이션하여 성능을 최적화합..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.배열에 항목 수정 하기배열에서 특정 항목을 찾아 수정하고, 새로운 배열을 상태로 설정한뒤 useState를 사용하여 상태를 업데이트하는 것입니다.   handleEdit 함수는 주어진 id를 가진 항목을 찾아 newName으로 업데이트합니다.names.map((name) => name.id === id ? { ...name, name: newName } : name): id가 일치하는 항목을 찾아 이름을 newName으로 변경하고, 그렇지 않은 항목은 그대로 유지하는 새로운 배열을 생성합니다.const handleEdit = (id, newName) => { setNames( names.map((na..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.배열에 항목 삭제 하기useState를 사용하여 상태를 업데이트한다.  1-1.상태 정의names: 이름 목록을 저장하는 배열 상태입니다. 각 항목은 고유한 id를 가진 객체입니다.const [names, setNames] = useState([ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name: 'Charlie' }]);  1-2.항목 제거 함수names.filter((name) => name.id !== id):   id가 일치하지 않는 항목들만 포함된 새로운 배열을 반환합니다.const handleRemove = (id) => { ..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.배열에 항목추가하기리액트에서 배열에 항목을 추가하는 방법은 상태를 관리하는 훅인 useState를 사용하여 상태를 업데이트하는 것입니다. 배열에 새로운 항목을 추가할 때는 기존 배열을 복사하고, 새로운 항목을 추가한 후에 상태를 업데이트합니다.  1-1.useRef로 변수 생성names: 이름 목록을 저장하는 배열 상태입니다. input: 입력 필드의 값을 저장하는 상태입니다.const [names, setNames] = useState(['Alice', 'Bob', 'Charlie']);const [input, setInput] = useState('');  1-2.입력 필드 값 변경 함수입력 필드의 값을..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/ 1.배열 렌더링리액트에서 배열을 렌더링하는 방법은 주로 배열의 map 메서드를 사용하여 배열의 각 요소를 컴포넌트로 변환하는 것입니다. 이때 각 요소에는 고유한 key 속성을 제공해야 합니다. key 속성은 리액트가 각 요소를 고유하게 식별하는 데 사용되며, 효율적인 업데이트를 돕습니다.   각 요소에 고유한 id를 key로 사용하여 map 메서드를 통해 렌더링합니다.import React from 'react';function NameList() { const names = [ { id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }, { id: 3, name..

1.useRef 리액트의 훅 중 하나로, 함수형 컴포넌트에서 DOM 요소나 값의 참조를 유지하는 데 사용됩니다.DOM 요소에 직접 접근, 렌더링과 무관하게 값을 저장때 사용됩니다.이 객체는 컴포넌트의 렌더 사이클 간에 값을 유지할 수 있습니다.     2.useRef로 DOM 접근useRef(null)을 호출하여 inputRef라는 ref 객체를 생성합니다.ref={inputRef}를 사용하여 input 요소에 inputRef를 연결합니다.inputRef.current를 통해 실제 DOM 요소에 접근할 수 있으며, focus() 메서드를 호출하여 입력 필드에 포커스를 맞출 수 있습니다.import React, { useRef } from 'react';function FocusInput() { // u..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.useState 를 통한 input 관리useState는 상태 변수와 상태를 업데이트하는 함수를 반환합니다. 상태가 업데이트되면, 리액트는 해당 컴포넌트를 다시 렌더링하여 새로운 상태 값을 반영합니다.다음 함수는 onChange 함수를 정의하여 input란이 업데이트되면 text값이 다시 렌더링되어 반영된다.onChange함수의 e.target.value는 입력 필드의 현재 값을 나타냅니다. 사용자가 입력한 값이 여기에 저장됩니다.import React, { useState } from 'react';function InputSample() { const [text, setText] = useState('..