React

Destructuring(구조 분할) 디스트럭쳐링은 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해준다. (Easily extract array elements or object properties and store them in variables

map()은 내장된 배열 메소드이다.map() 함수는 예전 값을 새 값으로 반환한다.모든 elements들에 대해 실행한다.모든 값을 새로운 배열로 반환한다.때문에 새로운 배열은 douvleNumArray에 저장된다!배열 관련 함수들은 각 elements들에서 실행되는

React is a JavaScript library for building user interfaces.리액트는 사용자 인터페이스를 구축하는 자바스크립트 라이브러리이다.React makes building complex, interactive and reactive

App 컴포넌트는 특별한 컴포넌트이다.not regarding its code that will be the same code as I see it in all the other components, but regarding its role in the applicat

- props는 properties를 나타내는 것으로, 사용자 지정 컴포넌트의 속성을 설정할 수 있다. - 재사용 가능한 컴포넌트를 만들 수 있게 해주고, 다른 컴포넌트에서 또 다른 컴포넌트로 데이터를 전달할 수 있게 해준다.

모든 date객체에 접근할 수 있는 내장 메소드 / 컴포넌트를 분할한다면, 코드가 짧아져서 유지보수와 관리가 수월하다.

드디어 React Complete Guide 강의의 첫 과제다...지출 표시를 담당하는 새 컴포넌트를 생성하세요. 2. 해당 컴포넌트에 여러 개의 ExpenseItem 컴포넌트를 추가하세요. 3. 앱 컴포넌트에 지출 데이터를 그대로 유지하면서 해당 데이터를 새로 생

\+ 지난 이야기...App.js에서 Expenses를 사용하는데, 그 컴포넌트 안에서 ExpenseItem과 ExpenseDate를 사용한다.작은 빌딩 블럭으로부터 사용자 인터페이스를 구축하는 이런 접근 방법을 일반적으로 합성(Composition)이라 부른다.나는.

React.js에서는 어떤 유형의 코드로 작성하나요? : 선언형(Declarative) JavaScript 코드 JSX란 무엇일까요? : React project에서만 활성화되는 특수한 비표준 구문이다.왜 component를 React의 모든 것이라고 할까? :

기존 자바 스크립트에서는...리액트는 JSX요소로 이동하여 이벤트 리스너를 추가함.리액트는 모든 기본 이벤트를 on으로 시작하는 props로 노출함. (ex. onClick, onChange....)모든 이벤트 핸들러 props는 값으로 함수가 필요함.ex)위와 같이

리액트는 절대 반복하지 않는다. 리액트는 응용프로그램이 처음 렌더링되었을 때 모든 과정(모든 컴포넌트를 지나 모든 함수들을 실행해서 화면에 그리는 것)을 실행하고 그 후에는 끝이다. 때문에 리액트에게 어떤것이 변경되었고, 특정 컴포넌트가 재평가되어야 한다고 말하는 방법

이번엔 자식->부모, 아래->위로 데이터를 전달하는 방식을 익힐 것이다. 부모 컴포넌트에 함수를 만들고 파라미터를 전달. import된 컴포넌트에 key:value의 형태로 함수를 전달. 자식 컴포넌트에서 props로 받아 props.키로 함수를 실행시켜 데이터를 넘겨

목표 이벤트를 수신해서 상위 컴포넌트(Expenses)에 데이터 보내기. 1. 이벤트 수신하기 2. 상위 컴포넌트로 데이터 보내고, state에 저장하기 하하하하 lifting state up을 해보라는 말씀이구나 이지 이지 쏘이지 이지이지

React로 작업 시 이벤트를 수신하지 않는 방법은?: 수동으로 이벤트리스너(ex. addEventListner)를 추가하는 것. 이는 명령형 코드이기에 해당 코드로는 React 기능을 사용하지 않으며, React 컴포넌트 외부에 있는 일부 함수를 트리거하므로 Reac

jsx코드에 하나씩 추가하는 것이 아닌, 동적으로 렌더링해야 한다.현재 코드를 보면Expenses이렇게 개별적으로 하나하나 추가하고 있는데,이렇게 하는 건 지양해야한다.이건 완전 하드코딩이잖아\~~그래서 map을 쓸 건데, map()은 다른 배열을 기반으로 새로운 배열

Add Expense를 해서 데이터를 App까지 끌어올리는 것을 지금까지 해놨고, 이제 새로 추가된 데이터를 기존 배열에 넣는 걸 할 거다.강의를 듣기 전에 내가 냅다 만들었던 코드는 아래와 같다.내가 딱 만들자마자 강사님이 이거랑 똑같이 만드시더니이런 식으로 stat

상태관리, 글로벌 상태관리, ContextAPI, Redux

src/redux/index.js위가 내 리덕스 로직 저장소인데, 필기할 게 생겨서 싸악 들고 왔다.아래를 보자.위는 increment를 말하고 있는데 왜 showCounter도 냅다 끼어드냐?이유는 redux는 기존 state를 대체하는 완전히 새로운 객체, 새 '스

: createSlice 함수는 Redux 상태 관리를 간소화하고 보일러플레이트 코드를 줄여주는 역할을 한다. createSlice 함수를 사용하여 리듀서(reducer)와 액션 생성자(action creator)를 한 번에 생성할 수 있다. 이를 통해 Redux 상

지금까지 액션과 리듀서에 관해 배웠고, 하나의 루트 리듀서를 배웠다.그리고 리덕스에 하나의 중앙 데이터 저장소가 있다.따라서 리덕스 툴킷을 사용할 때 configureStore로 스토어를 만들 수 있다.ex) src/store/index.js그리고 변수로 루트 리듀서

useEffect는 React의 훅(hook) 중 하나로, 컴포넌트의 생명주기에 따라 특정 작업을 수행하도록 설정하는 역할을 한다.useEffect를 사용하여 컴포넌트가 렌더링된 후에 실행되는 부수적인 효과(이펙트)를 관리할 수 있다.콜백 함수를 특정 시점에 호출하여

useCallback은 React에서 함수 컴포넌트의 성능 최적화를 위해 사용되는 Hook이다. useCallback을 사용하면 함수를 메모이제이션하고 필요할 때만 다시 생성할 수 있다. 이를 통해 불필요한 함수 생성과 컴포넌트 리렌더링을 줄여 성능을 향상시킬 수 있다

Vite는 빠른 개발 속도와 간편한 설정을 제공하는 웹 개발 도구. TypeScript(TS)와 함께 사용할 때도 편리한 기능을 제공. 다음은 Vite와 Create React App의 차이점, TS 사용 방법, 장단점 및 추가 정보에 대한 설명입니다:빌드 시스템: C