React basic

1. React란 무엇인가? React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다. 그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하

webpack이나 Babel 같은 모듈을 설치하고 설정해야 리액트 앱을 시작할 수 있었다.웹팩은 오픈 소스 자바스크립트 모듈 번들러로써 여러개로 나누어져 있는 파일들을 하나의 자바스크립트 코드로 압축하고 최적화하는 라이브러리입니다.여러파일의 자바스크립트 코드를 압축하여

npm run start 이 명령어로 리액트 앱을 시작할 수 있습니다.

예산 계산기 애플리케이션을 만들면서 리액트의 기본적인 것 들을 학습이 애플리케이션은 지출 항목을 추가 삭제 수정 할 수 있는 앱 입니다.JSX는 자바스크립트의 확장 문법입니다.리액트에서는 이 JSX를 이용해서 화면에서 UI가 보이는 모습을 나타내줍니다.의무는 아니지만

예산 계산기 앱 만들기(App.js) 이 앱은 App Component 부모 컴포넌트 안에 ExpenseForm ExpenseList 자녀 컴포넌트가 있으며 ExpenseList 컴포넌트 안에 여러 Expenseitem 자녀 컴포넌트들로 이루어져 있습니다. 원래 있

React Icon 리액트에서 아이콘을 사용하는 방법은 여러가지가 있지만 주로 react-icons 모듈을 이용해서 아이콘을 구현하게 됍니다. 필요한 패키지 설치 react icon 사용법 https://react-icons.github.io/react-icons/

가짜데이터 만들기현재 UI를 위해 필요한 컴포넌트들을 생성해 놓았습니다.그래서 가짜 데이터를 생성한 후에 그 가짜 데이터를 이용해서 지출 리스트를 보여주겠습니다.PropsProps는 Properties의 줄임말Props는 상속하는 부모 컴포넌트로부터 자녀 컴포넌트에 데

배열에 있는 데이터를 하나씩 순회하면서 처리해주기 위해서 사용할 수 있는 메소드들이 많지만 map() 메소드를 이용해서 initialExpenses 배열에 있는 데이터를 하나하나의 리스트 아이템으로 보여주겠습니다.MDN-map()map() 메서드는 배열 내의 모든 요소

JSX Key 속성은 무엇인가? 리액트에서 요소의 리스트를 나열할 때는 Key를 넣어줘야합니다. 키는 React가 변경, 추가 또는 제거된 항목을 식별하는 데 도움이 됩니다. 요소에 안정적인 ID를 부여하려면 배열 내부의 요소에 키를 제공해야 합니다. 리액트는 가상

지우는 함수에서 할 일은 아래 App.js 안에 있는 initialExpenses 배열에서 지우기로 클릭 된 id와 같은 id를 가지고 있는 객체를 배열에서 지워주면 됩니다.filter() 메서드 자세히로그에서 보면 newExpenses에는 클릭한 목록이 지워지긴 했는

컴포넌트 랜더링 결과물에 영향을 주는 데이터를 갖고 있는 객체입니다.State가 변경되면 컴포넌트 리랜더링(Re-rendering)됩니다.또한 State는 컴포넌트 안에서 관리됩니다.initialExpenses 배열 삭제하고 위 state 생성한다.자식 컴포넌트 배열에

constructor(생성자)를 사용하면 인스턴트화된 객체에서 다른 메서드를 호출하기 전에 수행해야 하는 지정 초기화를 제공할 수 있습니다.클래스를 new를 붙여서 (new User("John")) 인스턴트 객체로 생성하면 넘겨받은 인수와 함께 constructor가