Hooksstate를 정의해서 사용하거나 컴포넌트의 생명주기에 맞춰 어떤 코드를 실행되도록 할 수 없는 함수 컴포넌트에 그러한 기능을 지원하기 위해 나온 것리액트의 State와 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것훅을 사용하면 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있다.1. 훅의 이름은 모두 `use`로 시작한다. 각 기능을 사용하겠다 의미이다.2. 개발자가 커스텀 훅을 만들어서 사용할 수 있다. (이름 앞에 use를 붙이는 건 필수)useState가장 대표적으로 많이 사용되는 훅함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않으므로 클래스 컴포넌트처럼 state를 사용하고 싶다면 `useState()` 훅을 사용해야 함c..

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 ..

해결 방법`react-scripts` 라는 라이브러리를 현재 경로에서 실행시킬 수 없는 상황에서 발생`yarn add global react-scripts` 를 이용하여 react-scripts 라는 라이브러리를 전역으로 설치하기또는 프로젝트 디렉토리에서 `npm install ` 또는 `yarn install ` 명령어 실행해서 패키지 다시 설치하기출처1. https://thespoiler.tistory.com/21https://codingdiary99.tistory.com/5