본문 바로가기

이것저것 스터디📚

 (107)
React 공식문서 -State as a Snapshot(스냅샷으로서의 state) state 변수는 읽고 쓸 수 있는 일반 JavaScript 변수처럼 보일 수 있지만, state는 스냅샷처럼 동작한다. 즉, state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다. Setting state triggers renders(state를 설정하면 렌더링이 촉발됩니다) import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return Your message is on its way! } r..
React 공식문서 - Render and Commit(렌더링하고 커밋하기) 컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야한다. 이 과정을 주방에서 요리사가 재료를 가지고 요리를 한다고 가정해보자. 1. 렌더링 촉발(손님의 주문을 주방으로 전달) 2. 컴포넌트 렌더링(주방에서 주문에 대한 요리 준비하기) 3. DOM에 커밋(테이블에 주문한 요리 내놓기) Step 1: Trigger a render(렌더링을 촉발시킵니다) 컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다. 1. 컴포넌트의 첫 렌더링인 경우 2. 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우 1. 컴포넌트의 첫 렌더링인 경우 import Image from './Image.js'; import { createRoot } from 'react-dom/client'; const..
React 공식문서 - State: A Component's Memory(컴포넌트의 메모리) 컴포넌트는 폼에 입력하면 입력 필드가 업데이트되어야 하고, "구매"를 클릭하면 제품이 장바구니에 담겨야하는 등 현재 입력값, 장바구니와 같은 것들을 "기억"해야하는데, React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부른다. When a regular variable isn't enough(일반 변수로 충분하지 않은 경우) 일반 변수를 사용하게 되면 다음 두가지 이유로 변경 사항이 표시되지 않는다. 1. 지역 변수는 렌더링 간에 유지되지 않는다 : React는 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경사항을 고려하지 않고 처음부터 렌더링한다. 2. 지역 변수를 변경해도 렌더링을 발생시키지 않는다 : React는 새로운 데이터로 컴포넌트를 다시 렌더링해야 한다는 것을 인식하..
React 공식문서 - Responding to Events(이벤트에 응답하기) React를 사용하면 JSX에 click, hover, input, focus 등과 같은 상호작용에 반응하여 발생하는 이벤트 핸들러를 추가할 수 있다. Adding event handlers(이벤트 핸들러 추가하기) 이벤트 핸들러를 추가하려면 먼저 함수를 정의하고 적절한 JSX 태그에 prop으로 전달하면 된다. 보통 함수의 이름은 hanlde로 시작하는 이름 뒤에 이벤트 이름이 오도록 한다. 예를들어 handleClick, handleMouseEnter 등이 있다. 이벤트 핸들러를 prop으로 전달할 때에는 함수를 호출하는게 아니라 전달되어야 한다. passing a function (correct) calling a function (incorrect) alert('...')}> Reading pro..
DeepDive - 24장.클로저 클로저는 함수를 일급 객체로 취급하는 함수형 프로그래밍 언어에서 사용되는 중요한 특성으로 자바스크립트의 고유한 개념이 아니고, ECMAScript 사양에 등장하지도 않는다. 자바스크립트에서 클로저를 이해하려면 먼저 "함수가 선언된 렉시컬 환경"의 의미를 알아야한다. const x = 1; function outerFunc() { const x = 10; function innerFunc() { console.log(x); // 10 } innnerFunc(); } outerFunc(); 위의 예제에서 outerFunc 함수 내부에 중첩 함수 innerFunc가 정의되고 호출되었고, 중첩 함수 innerFunc의 상위 스코프는 외부 함수 outerFunc 스코프이기 때문에, 중첩 함수 innerFunc 내..
DeepDive - 23장.실행 컨텍스트 23.1 소스코드의 타입 * ECMAScript 사양은 소스코드(ECMAScript code)를 4가지 타입으로 구분하고, 4가지 소스코드는 실행 컨텍스트를 생성한다. - 전역코드 : 전역에 존재하는 소스코드(전역에 정의된 함수, 클래스 등의 내부코드는 포함되지 않음) 전역 변수를 관리하기 위해 전역 코드가 평가되면 최상위 스코프인 전역 스코프를 생성한다. - 함수 코드 : 함수 내부에 존재하는 소스코드(함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않음) 지역 스코프를 생성하고 지역 변수, 매개변수, arguments 객체를 관리하기 위해 함수코드가 평가되면 함수 실행 컨텍스트가 생성된다. - eval 코드 : 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 str..
React 공식문서 - Keeping Components Pure(컴포넌트 순수성 유지) 컴포넌트를 엄격하게 순수 함수로만 작성하면 버그와 예측할 수 없는 동작을 피할 수 있고, 컴포넌트를 순수하게 작성하기 위해서는 몇 가지 규칙을 준수해야 한다. Purity: Components as formulas(순수성: 수식으로서의 컴포넌트) React 컴포넌트는 항상 동일한 입력이 주어졌을 때 항상 동일한 JSX를 반환해야 한다. Side Effects: (un)intended consequences(사이드 이펙트: 의도하지 (않은) 결과) 컴포넌트는 오직 JSX만을 반환해야하며, 렌더링 전에 존재했던 객체나 변수를 변경해서는 안된다. 이는 컴포넌트를 순수하지 않게 만들 수 있다. 아래 예제에서 Cup 컴포넌트는 렌더링 시점에 따라 JSX도 다르게 생성된다. let guest = 0; funct..
React 공식문서 - Rendering Lists(목록 렌더링) 데이터 모음에서 유사한 컴포넌트를 여러 개 표시할 때, JavaScript의 배열 메서드를 사용할 수 있다. Rendering data from arrays(배열에서 데이터 렌더링하기) 서로 다른 데이터를 사용해서 동일한 컴포넌트의 여러 인스턴스를 표시할 떄, 해당 데이터를 JavaScript의 객체와 배열에 저정하고 map() 및 filter()와 같은 메서드를 사용해서 컴포넌트 목록을 렌더링할 수 있다. const people = [ 'Creola Katherine Johnson: mathematician', 'Mario José Molina-Pasquel Henríquez: chemist', 'Mohammad Abdus Salam: physicist', 'Percy Lavon Julian: ch..

티스토리툴바