나빈스 코딩

반응은 빨리하고 싶지만 화면 랜더링처럼 무거운 연산은 천천히 하고 싶을 때 쓴다.무거운 작업을 지연시켜서 사용자 경험을 부드럽게 해준다.

리액트 훅이란?함수로 만든 리액트 컴포넌트에서 클래스로 만든 컴포넌트의 기능을 이용하도록 도와주는 함수들이다.클래스로 만든 컴포넌트는 문법이 복잡했지만 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..

리액트 탄생페이스북은 동시대 나온 서비스 중 유독 인터렉션(상호작용)이 많았다.상호작용이란 좋아요, 채팅처럼 양방향으로 소통하는 기능이다.당시에는 정적인 웹을 개발하는 데에 초점을 두었기 때문에 이를 다루기 어려웠다.그래서 리액트가 탄생했다.리액트 특징 3가지1. 컴포넌트 사용 : 재사용이 필요한 애들을 컴포넌트로 사용하기 때문에 코드가 유연해진다.2. 간단한 업데이트 : 자동차가 고장나면 고장난 부분을 찾아서 고치는 게 아니라 아예 새차로 바꾸는 방식이라서 간단하다.3. 빠른 업데이트 : 버츄얼 돔을 이용해서 업데이트 사항을 모아뒀다가 한번에 실제 돔을 업데이트한다.Recap: DOM과 랜더링웹에서 페이지를 업데이트하려면 DOM을 조작해야한다.돔은 HTML 코드를 트리로 변환한 구성물이다.돔은 브라우저..