FrontEnd

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

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.props (properties)props는 컴포넌트에 전달되는 데이터를 의미합니다.부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용됩니다. props는 읽기 전용이며, 컴포넌트 내부에서 변경할 수 없습니다.import React from 'react';// 자식 컴포넌트function Greeting(props) { return Hello, {props.name}!;}// 부모 컴포넌트function App() { return ;}export default App;읽기 전용: props는 읽기 전용이므로, 컴포넌트 내부에서 변경할 수 없습니다. 만약 컴포넌트에서 변경이 필요한 데이터라면, st..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.JSX(JavaScript XML)JSX(JavaScript XML)는 리액트에서 UI를 정의할 때 사용하는 문법 확장입니다. JSX는 JavaScript 코드 안에서 HTML과 유사한 구문을 사용할 수 있게 해주며, 이를 통해 컴포넌트의 구조를 더 직관적이고 읽기 쉽게 작성할 수 있습니다.   2.JSX 특징2-1.HTML과 유사한 문법JSX는 XML/HTML과 매우 유사한 문법을 사용하여 UI 구조를 정의합니다. 이를 통해 UI를 정의할 때 더 직관적이고 읽기 쉽게 만들 수 있습니다.const element = Hello, world!;  2-2.JavaScript 표현식 포함 가능JSX 안에서는 중괄호..

벨로퍼트와 함께하는 모던 리액트를 학습하여 작성했습니다.https://react.vlpt.us/1.컴포넌트(Component)사용자 인터페이스(UI)를 구성하는 독립적이고 재사용 가능한 코드의 조각을 의미합니다.컴포넌트는 HTML, CSS, JavaScript를 포함하여 특정 UI 부분을 정의하고, 이를 통해 복잡한 UI를 작은 단위로 나누어 효율적으로 관리할 수 있습니다.재사용성: 컴포넌트는 여러 곳에서 재사용될 수 있습니다.독립성: 각 컴포넌트는 자체적인 상태와 메서드를 가질 수 있습니다.구성 가능성: 컴포넌트는 다른 컴포넌트를 포함할 수 있어 복잡한 UI를 구성할 때 유용합니다.선언적: 리액트는 선언적 방식으로 UI를 정의하므로 코드가 더 직관적이고 유지보수가 용이합니다.  2.클래스 컴포넌트 (C..