State: 컴포넌트의 메모리 학습 내용 state 변수 추가하기 useState 까보기 컴포넌트에 여러 state 변수 지정하기 State is isolated and private 지역 변수와 렌더링 export function App() { let count = 0; function handleCount() { count++; } return ( {count} + ) } handleCount 이벤트 핸들러가 지역 변수 count를 업데이트하고 있다. 그러나 두 가지 이유로 변경 사항이 표시되지 않는다. 지역 변수는 렌더링 간에 값이 유지되지 않는다. React는 컴포넌트를 두 번째로 렌더링할 때 지역 변수에 대한 변경 사항을 고려하지 않고 처음부터 렌더링한다. 즉, count는 다시 0이 된다. 지..
10. 객체 리터럴 객체란? 객체란? JavaScript에서 원시(Primitive) 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체(Object)이다. 원시 타입의 값은 변경 불가능한 값(immutable value)이지만, 객체는 변경 가능한 값(mutable value)이다. 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다. JS에서 사용할 수 있는 모든 값은 프로퍼티 값(value)이 될 수 있다. JS의 함수는 일급 객체이르모 값으로 취급할 수 있다. 프로퍼티 값이 함수일 경우, 메서드(method)라 부른다. var person = { name: 'Lee', age: 20, increase: function() { thi..
Warning Warning: Each child in a list should have a unique 'key' prop 위 경고 메시지는 React에서 동적으로 여러 개의 컴포넌트를 생성할 때 각 컴포넌트에 고유한 key props가 없을 경우에 발생한다. React는 key 값을 통해 컴포넌트의 고유성을 파악하고, 이를 통해 DOM 업데이트를 효율적으로 수행한다. Rendering Lists 데이터 리스트에서 여러 유사한 컴포넌트를 렌더링하고 싶을 때가 많다. JavaScript 배열 메서드를 사용하여 이를 수행할 수 있다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: chemist Mohammad Abd..
Lazy Loading React에서 Lazy Loading은 주로 Code Splitting을 위해 사용되는 기법이다. 이 기법을 통해 애플리케이션의 초기 로딩 시간을 줄이고, 성능을 향상시킬 수 있다. Lazy Loading의 주요 목표 특정 컴포넌트 또는 모듈을 실제로 필요할 때까지 로딩하지 않는 것 이렇게 함으로써 초기 페이지 로드에 필요한 코드 양을 불이고, 초기 로딩 성능을 개선할 수 있다. React 16.6 버전부터 React.lazy()와 Suspense를 사용하여 Lazy Loading을 쉽게 구현할 수 있게 되었다. 사용 방법 React.lazy(): 컴포넌트 외부에서 동적 import() 문법을 사용하여 컴포넌트를 로드하는 함수를 받아, 자동으로 컴포넌트를 Lazy Load한다. c..
컴포넌트 순수성 유지 Docs 학습 내용 순수성이 무엇이고 그것이 버그를 방지하는 데에 어떻게 도움이 되는지 렌더링 단계에서 변경 사항을 제외함으로써 컴포넌트를 순수하게 유지하는 방법 컴포넌트에서 실수를 찾기 위해 Strict Mode를 사용하는 방법 Purity: Components as formulas 순수성: 수식으로서의 컴포넌트 Pure Function 컴퓨터 과학(특히 함수형 프로그래밍의 세계)에서 "순수 함수"는 다음과 같은 특징을 가진 함수이다. 동일한 입력에 대해 항상 동일한 출력을 반환한다. 순수 함수는 주어진 입력에 따라 결과를 반환하는데, 이때 외부 상태나 데이터에 의존하지 않는다. 따라서 동일한 입력값이 주어지면 항상 동일한 결과를 반환한다. 부수 효과(Side Effects)가 없..
