나빈스 코딩

박스의 가로와 세로에 padding과 border를 포함시킨다는 뜻이다.직관적으로 이해할 수 있어서 좋다.

리액트 훅이란?함수로 만든 리액트 컴포넌트에서 클래스로 만든 컴포넌트의 기능을 이용하도록 도와주는 함수들이다.클래스로 만든 컴포넌트는 문법이 복잡했지만 state나 ref같은 기능을 쓰기 위해 써야만했다.하지만 리액트 훅이 생기면서 함수로 만든 컴포넌트에서도 기능들을 쓸 수 있게 되었다.클래스로 만든 기능을 낚아채듯 가져와서 쓴다는 뜻으로 Hook이란 이름을 붙였다. 리액트 훅의 이름에는 항상 use를 붙인다.useState, useRef, useEffect 등이 있다.useState변수의 상태를 관리할 수 있는 훅이다.리액트 컴포넌트는 자신이 관리하는 state 값이 변하면 스스로 다시 호출한다.그리고 변경된 state 값을 페이지에 렌더링한다. 이를 리렌더링이라고 한다.const [state, set..

다양한 입력폼을 간단하게import { useState } from "react";function Body() { const [state, setState] = useState({ name: "", gender: "", birth: "", bio: "", }); const onChange = (e) => setState({ ...state, [e.target.name]: e.target.value }); return ( 남성 여성 );}export defa..