Suro Dev

React Form 😎 목적 UseState Hook으로 form을 객체 상태로 관리 input Controlled Component (제어 컴포넌트) 객체의 값을 Bracket notation (괄호 표기법)으로 접근 👶 1. 기본 뼈대 import React from 'react' export default function AppForm() { const handleSubmit = (e) => { e.preventDefault(); } return ( 이름 : ID : Password : Submit ) } AppForm.jsx Form에 e.preventDefault를 해준 이유는 새로고침을 방지하기 위해서이다. 자세한 링크 : https://react-ko.dev/reference/react-do..

React Hook - useEffect 💬 useEffect란? 어떠한 컴포넌트가 Mount, Update, Unmount 되었을 때 특정 작업을 실행 인자로는 콜백함수(Callback Function)을 받음 Mount : 화면에 첫 렌더링 Update : 다시 렌더링 Unmount : 화면에서 사라질 때 😎 useEffect 사용하기 App.js 1. 우선 useEffect 를 사용하기 위해 import를 시켜줘야한다. import { useEffect } from 'react'; 2. 기본적인 useEffect 문법은 2가지 형태가 있다. // 1번 useEffect(() => {/* 작업.. */}); // 2번 useEffect(() => {/* 작업.. */}, [value]); 1번 use..

React Hook - useState 💬 State란? 컴포넌트 내에서 변경이 일어나는 값을 관리하기 위해 사용 사용자 UI와 밀접하고 변경이 잦다면 변수(let, const) 말고 useState 사용 😎 useState 사용하기 App.js 1. 우선 useState를 사용하기 위해 import를 시켜줘야한다. import { useState } from 'react'; 2. 기본적인 useState 문법은 다음과 같다. const [변수명, set변수명] = useState(초기값); 첫번째는 변수명, 두번째는 변수를 변경시킬 함수다 코드만 보면 이해가 안되니 예시를 보도록 하자. 🔥 useState 예시1 첫 번째 예시는 버튼 클릭시 1씩 증가하는 대표적인 Counter 예시이다. App.js ..