FrontEnd/React

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.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('..

1.useStateuseState는 함수형 컴포넌트에서 상태(state)를 관리하기 위해 사용하는 리액트 훅입니다. useState를 사용하면 컴포넌트에서 동적인 데이터를 관리하고, 상태가 변경될 때마다 컴포넌트를 다시 렌더링할 수 있습니다. import React, { useState } from 'react';function Counter() { // useState 훅을 사용하여 count 상태 변수와 상태 업데이트 함수를 선언 const [count, setCount] = useState(0); // 버튼 클릭 핸들러 함수 const increment = () => { // 상태 업데이트 함수 호출 setCount(count + 1); }; return ( C..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.조건부 렌더링특정 조건에 따라 컴포넌트나 요소를 렌더링하는 것입니다.조건문을 사용하여 사용할수있습니다. import React from 'react';function UserGreeting() { return Welcome back!;}function GuestGreeting() { return Please sign up.;}function Greeting(props) { const isLoggedIn = props.isLoggedIn; if (isLoggedIn) { return ; } return ;}function App() { return ( )..

1.statestate는 컴포넌트 내에서 변경될 수 있는 동적인 데이터를 관리하는 데 사용됩니다.주로 사용자 입력, 네트워크 요청 결과, 또는 다른 인터랙션에 따라 변경되는 데이터를 저장합니다.   2.클래스 컴포넌트에서 state초기 상태 설정: constructor 메서드 내에서 this.state를 사용하여 초기 상태를 설정합니다. 상태 변경: 상태를 변경하려면 this.setState 메서드를 사용합니다.import React, { Component } from 'react';class Counter extends Component { constructor(props) { super(props); // 초기 상태 설정 this.state = { count: 0 };..