수박쓰

Firebase란? 파이어베이스는 구글에서 제공하는 클라우드 기반의 개발 플랫폼으로, 실시간 데이터베이스, 인증, 스토리지 등 다양한 기능을 제공한다. 리액트와 함께 파이어베이스를 사용하면 실시간으로 데이터를 동기화하고 사용자 인증, 파일 업로드 등을 간편하게 처리할 수 있다. Firebase 사용 방법 파이어베이스 프로젝트 설정 및 초기화: 파이어베이스 콘솔에서 프로젝트 생성 및 설정을 완료한다. 리액트 프로젝트에서 파이어베이스 SDK를 설치하고 초기화한다. 파이어베이스 리얼타임 데이터베이스 사용하기: 데이터 읽기: import firebase from 'firebase'; const db = firebase.database(); const ref = db.ref('경로'); ref.on('value'..

Form React에서 Form을 만들기 위해서는 일반 HTML Form과 유사한 방식으로 작성하면 다. React Form은 state를 사용하여 입력값을 관리하고, 입력값의 유효성을 검사하거나 전송을 처리할 수 있다. React에서 Form을 만들기 위한 단계 state에 입력값을 저장하기 위한 변수를 만든다. Form 요소를 만든다. 이때, input 요소는 value 속성을 통해 state에 저장된 값을 가져와 출력한다. 입력값이 변경될 때마다, onChange 이벤트를 통해 state를 업데이트한다. Form 요소의 onSibmit 이벤트를 처리하여 입력값의 유효성 검사나 전송을 처리함 fetch() React에서 데이터를 가져오기 위해서는 JavaScript의 fetch() 함수를 사용한다. ..

onChange란? 사용자가 input, select, textarea 등의 폼 요소에 값을 입력하거나 선택할 때 발생한다. 이 이벤트를 사용하여 사용자 입력에 따라 리액트 컴포넌트의 상태(state)를 업데이트할 수 있다. input 요소에서 onChange 이벤트를 사용하는 방법은 다양하다. 일반적으로 input 요소의 값이 변경될 때마다 이벤트가 발생하며, event.target.value를 통해 변경된 값에 접근할 수 있다. 이를 활용하여 사용자 입력에 따라 리액트 컴포넌트의 상태를 업데이트할 수 있다. import { useState } from 'react'; function InputExample() { const [value, setValue] = useState(''); function ..

props (“properties”의 줄임말) 와 state 는 일반 JavaScript 객체다. 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데, 한 가지 중요한 방식에서 차이가 있다. props는 (함수 매개변수처럼) 컴포넌트에 전달되는 반면 state는 (함수 내에 선언된 변수처럼) 컴포넌트 안에서 관리된다. State Props 유스케이스 뷰에 렌더링돼야 하는 컴포넌의 데이터를 저장하는데 사용 데이터, 이벤 핸들를 자식 컴포넌에 전달하는 데 사용 가변성 상태는 데이터를 보유하고 시간이 지남에 따라 변경될 수 있음 props는 바뀔 수 없음. 한번 설정되면 props를 변경할 수 없음 업데이트 이벤트 핸들러는 일반적으로 state를 업데이트 함 상위 컴포넌트는 하위 컴포넌트에 대한 p..

1. map 1-1.map이란? map() 함수는 각 배열의 요소를 돌면서 인자로 전달된 함수를 사용하여 처리 된 새로운 결과를 새로운 배열에 담아 반환하는 함수이다. 1-2.문법 - arr.map(callbackFunction(currenValue, index, array), thisArg) 1) callbackFunction : 새로운 배열의 요소를 생성하는 함수로서 다음 세가지 인수를 갖는다. ㆍcurrenVlaue : 현재 배열(arr) 내의 값들을 의미 ㆍindex : 현재 배열 내 값의 인덱스를 의미 ㆍarray : 현재 배열 2) thisArg(선택항목) : callback 함부 내부에서 사용할 this 레퍼런스 를 설정한다. map 함수 사용 예 const numbers = [1, 3, 5..

1. Props(프로퍼티)란? - 상위 컴포넌트가 하위 컴포넌트에게 값을 전달할 때 사용 - 프로퍼티는 수정할 수 없다는 특징이 있음(읽기 전용 데이터) - props에 문자열을 전달할 때는 큰따옴표(" ")를, 문자열 외의 값을 전달할 때는 중괄호({ })를 사용 2. Props(프로퍼티) 사용하기 1. App.js에서 Test.js에 값 전달 2. App.js에서 출력할 글 작성 3. index.js에서 출력 App.js export default function App() { return ( ); } Test.js export default function Test(props) { return ( Hello, This is {props.이름} My MBTI is {props.mbti} My age ..

React란? 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. import {createRoot} from "react-dom/client" const rootElement = document.getElementById("root") const root = createRoot(rootElement) root.render( Hi bye ) 이 위의 코드는 리액트로 Hi를 출력하는 코드이다. 'Hi'를 제외하고 모든 문장들은 리액트의 기본 구조이니 외워두도록 하자. import {createRoot} from "react-dom/client" const rootElement = document.getElementById("root") const root = createRoot(r..