sh: react-scripts: command not foundnpm start시 발생한 에러 npm installnpm install 하니 해결

* useReducer()useState의 대체 함수로, (state, action) => newState의 형태로 reducer를 받고 dispatch 메서드와 짝의 형태로 현재 state를 반환한다. Hooks API Reference – ReactA JavaScript library for building user interfacesko.reactjs.orguseReducer는 내장된 훅으로 state관리를 도와준다.(=useState와 기능이 유사하지만, 더 많은 기능이 있음)그래서 더 복잡한 state에 특히 유용하다. 여러 state들이 함께 속해 있는 경우 (복잡한 state) - 여러 state가 함께 바뀌거나, 서로 관련되어 있는 경우useState나 거기에서 얻은 state는 사용 및 ..

리액트의 메인 기능은 UI를 렌더링하는 것과 동시에 사용자의 input에 따라 UI를 렌더링해주는 것. 리액트가 어플리케이션에서 주로 하는 일1. JSX코드와 DOM을 평가하고 렌더링2. state와 prop 관리(모든 컴포넌트에 필요한 데이터가 있는지, 사용자 입력을 올바르게 반영하고 있는지 확인하기 위함)3. 컴포넌트와 관련 JSX코드를 재평가하고, 필요에 따라 실제 DOM을 조작할 수 있음 컴포넌트는 단지 함수이기 때문에 위에서 => 아래로 실행한다.함수 안에 있는 모든 것은 결국 화면에 무언가를 가져오는것에 관한 것들.(click등의 사용자 입력에 반응하여)  * Side Effect: 어플리케이션에서 일어나는 다른 모든 것들ex) http 리퀘스트를 보내는 것, 로컬스토리지에 데이터 저장하는 것..

* React Developer ToolsVue.js Devtool처럼 리액트도 확장프로그램이 존재한다.확장프로그램 설치 후 컴포넌트에 들어가면 컴포넌트 트리를 볼 수 있다. 컴포넌트 내부에 루트요소는 무조건 1개여야한다. 로 감싸는 방법 외에 할 수 있는 방법은,const Wrapper = props => { return props.childern;};export default Wrapper;import React from './react';import Wrapper from './Wrapper';import Card from './Card';const Test = () => { return ( )}props.childern요소만을 re..

* 동적 인라인 스타일 설정스타일을 동적으로 할당하는 방법은 이전 게시물에도 적었듯이, style태그 객체를 인라인으로 선언해주는 방법이 있다.그럼 조건에 따라 스타일이 할당되기 위해서는 어떻게 해야할까,만약 입력받는 text가 공백일 경우 빨강색으로, text가 유효할 경우 초록색으로 바꾸고 싶다.우선, 상태가 변경되기 때문에 state를 사용해서 상태를 체크해줘야한다.const CourseInput = props => { const [enteredValue, setEnteredValue] = useState(''); const [isValid, setIsValid] = useState(true); const goalInputChangeHandler = event => { //만약 현재 들어온..

* array.map() Array.prototype.map() - JavaScript | MDNmap() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.developer.mozilla.orgarray.map()메소드는 다른 배열을 기반으로 새로운 배열을 생성하는데, 원본배열에 있는 모든 요소를 변환한다.map()메소드를 통해 변환 인자를 거쳐 함수가 시행되면 배열에 있는 모든 요소에 map을 실행한다. 이후 새로운 배열이 생성. {props.items.map(expense => ( ))} //array.map(사용자가 지정한 매개변수명 => ) 사용자 지정 컴포넌트를 동적으로 할당하기 위해서 map메서드를 이용한다.map을 이용해..

*props.childernprops.childern 사용시 사용자 지정 컴포넌트 내 안에 있는 컨텐츠들.props.childern children은 예약어import './Card.css';function Card(props){ return ( {props.children} )}export default Card;import './ExpenseItem.css';import Card from './Card';import ExpenseDate from './ExpenseDate';function ExpenseItem(props) { return ( {props.title} ${props.amount} );}exp..

* 리액트의 대표적인 특징: 재사용성이 뛰어나고, 우려사항을 분리할 수 있다 (컴포넌트) 재사용성: 반복X우려사항을 분리할 수 있음: 작고 관리 가능한 단위로 유지함수처럼 코드를 여러개로 나눠서 짜맞추는 것 * 초기 실행 create-react-app 실행하기 위해서는 node.js설치가 필수(vue create 할 때에도 필요했음)node.js가 설치되어있으면, 개발서버에서 미리보기를 할 수 있음 npx create-react-app 생성하려는폴더명cd 생성한폴더명npm start //개발서버 구동 리액트 미리보기 하는 중 package.json : 프로젝트에서 어떤 패키지 사용하고 있는지 보여줌 npm installpackage.json에 등록되어있는 필요한 패키지 등을 설치해줌 import Reac..

https://cocoon1787.tistory.com/852 [React] "Error: error:0308010C:digital envelope routines::unsupported" 에러 해결🚀 Error log Error: error:0308010C:digital envelope routines::unsupported ... { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUcocoon1787.tistory.com 도움을 받은 티스토..