1. React18에서 업데이트 된 기능 ㄱ. Automatic Batching Batching이란 리액트가 더 나은 성능을 위해 여러 개의 상태 업데이트를 한 번의 리렌더링(re-render)으로 묶는 작업. 이전의 React에서는 React Event Handler만이 state 업데이트를 Batching 처리했다. 18 버전 이후로는 React Event Handler뿐만 아니라 promise, setTimeout, native event handler 등 다양한 로직에서도 Batching 작업이 가능해졌다. // Before: only React events were batched. setTimeout(() => { setCount(c => c + 1); setFlag(f => !f); // Re..
createRoot 도 결국 하나의 함수이고 parameter 로는 domNode 를 넘기게 된다. root 라는 아이디를 가지고 있는 Dom 요소를 직접 가져와서 그 하위에 과 같은 하위 컴포넌트들을 렌더링시켜줌 render 함수 안에서 업데이트가 필요한 컴포넌트를 탐색함 컴포넌트의 형태에 맞는 함수를 호출하고 그 결과를 저장한 다음, JSX 문법을 다른 형태로 변환한 뒤 변환되어있는 것에 내장된 함수를 호출해서 최종적으로는 객체를 만들게 됨.
https://vercel.com/123456soobin-choi/test-todo Dashboard – Vercel The deployment that is available to your visitors. vercel.com React 입문 주차 시험 전체 코드 - App.js import { useState } from "react"; import "./App.css"; function App() { const [con, setCon] = useState(""); //새로운 값을 담을 con 초기값 선언 const [toDos, setToDos] = useState([]); //con들을 담을 배열 초기값 선언 const onChangeHandler = (event) => { setCon(event..
🔐 event listener는 등록되면 반드시 해제되어야 합니다. 클래스형 컴포넌트에서는 컴포넌트가 화면에서 사라질 때(unmount 될 때) event listener를 해제합니다. (componentWillUnmount에서요!) 그럼 라이프사이클 메소드를 사용할 수 없는 함수형 컴포넌트에서는 event listener를 해제할 때 어떻게 해야할까요? A: useEffect() 함수 사용해야 합니다! 함수형 컴포넌트에서는 useEffect의 return구문에서 Clean up 함수 적용해야 합니다. ✔️ useEffect(() => {} , []) 는 인자(parameter)로 함수, 배열 두가지를 넣을 수 있다. 함수: render이후에 동작하게 될 함수 배열: deps(dependency), 동작..
2 way data binding (양방향 바인딩) Data binding : 객체와 데이터를 일치시키는 것 두 데이터 혹은 정보의 소스를 모두 일치시키는 기법. 즉 화면에 보이는 객체와 브라우저 메모리에 있는 데이터를 일치시킨다. JSX Data binding 자바스크립트 데이터를 HTML에 넣어주는 것. Js 데이터를 HTML 데이터와 같도록 해주는 것. function App() { var data = 'Hello World!'; return ( { data } ) } //결과 Hello World! 리액트는 이렇게 중괄호 안에 데이터 바인딩하고 싶은 함수를 적는다. 양방향 바인딩(2-way data binding)의 경우, 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만(Angul..