List JavaScript에서 map 메서드를 사용해 새로운 배열을 생성하는 방법은 아래와 같습니다. const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); // [2, 4, 6, 8, 10] 이와 ...

Event 이벤트(event)란 여러분이 프로그래밍하고 있는 시스템에서 일어나는 사건을 말합니다. 예를 들면 “클릭을 했을 때”, “스크롤을 했을 때”, “무언가 입력했을 때” 등의 상호작용으로 인해 일어나는 사건을 말합니다. 즉, 해당 사건에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것입니다. DOM의 Event Handling...

State 상태 State는 React 컴포넌트의 데이터를 말하며, 개발자가 정의하는 것으로 렌더링이나 데이터 흐름에 사용되는 값만을 State에 포함시켜야합니다. 또한, State는 특별한 값이 아닌 Javascript의 객체입니다. State 정의 Class Component에서의 State Class Compon...

Hooks Hook이 나오기 전까지는 State에 접근하거나 생명주기 기능(lifecycle features)을 사용하기 위해서는 클래스 컴포넌트를 선언을 해줘야 했습니다. 하지만 클래스 컴포넌트는 로직의 재사용이 불가능하고 코드가 복잡하다는 단점이 있습니다. React의 Hook은 16.8 버전부터 추가된 기능으로 함수 컴포넌트에서 React ...

DOM Element의 Attributes 기본적인 DOM Element(div, span 등)은 camelCase로 작성 tabIndex, className 등 (‘data-’ 또는 ‘aria-’ 로 시작하는 Attribute는 제외) HTML과 다른 이름을 가지는 Attribute ...

React Component 개념적으로 컴포넌트는 JavaScript 함수와 유사합니다. props라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React Element를 반환합니다. 여기서 중요한 특징은 모든 React Element는 props를 직접 변경할 수 없으며, 같은 props에 대해서는 항상 같은 결과를 반...

React Element Element는 컴포넌트의 구성요소이며 React App을 구성하는 가장 작은 단위로 화면에 표시할 내용을 기술합니다. DOM 노드 혹은 컴포넌트를 표현하는 JavaScript의 일반 불변 객체(Plain Immutable Object)에 해당합니다. React 라이브러리에 있는 React.createElement(…) ...

CRA (create-react-app) React 프로젝트를 개발하고 실행하기 위해서는 Babel, Webpack 등 많은 설정이 필요합니다. 이는 React 프로젝트를 시작하는데 큰 어려움으로 작용합니다. 따라서, 페이스북은 많은 사람들이 쉽고 빠르게 React를 시작할 수 있도록 create-react-app을 제공하기 시작했습니다. ...

JSX JSX는 React에서 사용하며 Javascript에서 XML을 추가해 확장한 문법입니다. React는 별도의 파일에 HTML 마크업 언어와 Javascript 로직 언어를 동시에 작성하여 컴포넌트 단위로 분리합니다. 이러한 형태는 공식적인 자바스크립트 문법이 아니므로 브라우저를 실행하기전에 Babel을 이용해 일반 자바스크립트 형태의 코...

React 탄생 배경 웹에서의 기능들이 많아지면서 사용자들과 상호작용하는 UI 역시 많아지게됩니다. 이에 개발자들은 세대별 기술의 한계를 느끼고 새로운 기술을 개발하게됩니다. 1세대 기본적인 HTML, CSS, Javascript로 DOM을 조작하며 이벤트를 발생시킵니다. 2세대 JQuery ...