State리액트 컴포넌트의 상태를 의미함, 즉 리액트 컴포넌트의 변경 가능한 데이터state는 자바스크립트 객체임state는 사전에 미리 정해진 것이 아니므로 컴포넌트를 개발하는 개발자가 직접 정의해서 사용함렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 함왜냐하면 state가 변경될 경우 컴포넌트가 다시 렌더링 되기 때문에 렌더링과 데이터 흐름에 관련 없는 값을 포함하면, 컴포넌트가 다시 렌더링 되어 성능을 저하 시킬 수 있기 때문import React, { useState } from 'react';const WrongExample = () => { const [name, setName] = useState('나마니'); const [count, setCount] = useState..

리액트 컴포넌트리액트 컴포넌트에서의 입력은 `props`, 출력은 리액트 엘리먼트.역할: `어떠한 속성들을 입력으로 받아서 그에 맞는 리액트 엘리먼트를 생성하여 리턴해주는 것컴포넌트의 이름은 항상 대문자로 시작해야 한다. Props리액트 컴포넌트의 속성컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체 Props를 사용하지 않는다면?데이터 흐름의 혼란props는 부모 컴포넌트 -> 자식 컴포넌트로 데이터를 전달하는 기본적인 방식이므로, props를 사용하지 않으면 데이터가 어디서 오는지, 어디로 가는지 명확하지 않기 때문에 코드의 가독성이 떨어지고 유지보수가 어려워짐 Props를 사용하지 않은 경우import React, { useState } from 'react';const ParentCom..

리액트 엘리먼트JS 객체로, 리액트 컴포넌트가 렌더링 할 내용을 설명한다.가상 DOM에서 관리 되고, 변경 사항을 효율적으로 반영하기 위해 사용한다.리액트의 Virtual DOM (Document Ojbect Model)에 존재하는 엘리먼트는 리액트 엘리먼트가 된다.리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이다.리액트 엘리먼트는 자바스크립트 객체 형태로 존재한다.불변성, 따라서 엘리먼트 생성 후에는 children 이나 attributes를 바꿀 수 없다 -> 새로운 엘리먼트를 만들어서 기존 엘리먼트와 바꿔치기 해야한다. DOM 엘리먼트실제 웹 페이지 구성 요소이다.브라우저가 HTML을 해석해서 만든 객체사용자에게 실제로 보이는 웹 페이지의 구성요소실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM ..

리액트 실행 순서`localhost:3000`으로 접속을 요청하면, 리액트 앱 서버는 public 폴더의 `index.html`을 반환함개발자 도구 `Element` 탭에서 태그에 작성된 `script` 태그를 확인한다. 그리고 `bundile.js`를 불러와 실행한다.`bundle.js`는 src 폴더에 있는 `index.js`와 이 파일이 불러온 모듈을 하나로 묶어놓은 파일이기 때문에, `index.js`에 어떤 내용이 있는지 파악해야 리액트 앱의 동작을 제대로 이해할 수 있음`index.js`는 `ReactDOM.createRoot` 메서드로 돔에서 리액트 앱의 루트가 될 요소를 지정함`render` 메서드를 사용해 돔의 루트 아래에 자식 컴포넌트를 추가하고, 결과적으로 App 컴포넌트가 렌더링 됨..

정답 코드// 홀수번째만 출력하기const aniArr = ['강아지', '망아지', '야옹이', '어흥이', '거북이'];const resultArr = aniArr.map((name, index) => { // 배열은 0부터 시작하고, 홀수를 출력하라는 게 아닌 홀수'번째'를 출력하라고 했으므로 강아지가 첫 번째가 됨 if (index % 2 == 0) { console.log(name); }});console.log(resultArr); 출력 결과: 강아지, 야옹이, 거북이내가 이해한 코드// 홀수번째만 출력하기const aniArr = ['강아지', '망아지', '야옹이', '어흥이', '거북이'];const resultArr = aniArr.map((name, index) => { if (ind..