React

\*리액트 이해리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용하빈다. 구조가 MVC, MVW 등인 프레임워크와 달리, 오직 V(View)만 신경 쓰는 라이브러리입니다.리액트 프로젝트에서 특정 부분이 어떻게 생길지 정하는 선언체가 있는데, 이를 컴포

\*JSXJSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생겼습니다. 이런 형식으로 작성한 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바베을 사용하여 일반 자바스크립트 형태의 코드로 변환됩니다.\*JSX 문법감싸인 요소리액트 컴포넌트에서

컴포넌트를 선언하는 방식은 두 가지 입니다., 하나는 함수형 컴포넌트이고, 또 다른 하나는 클래스 형 컴포넌트 입니다.클래스형 컴포넌드와 함수형 컴포넌트의 차이점은 클래스형 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정

*리액트의 이벤트를 사용할 때 주의 사항 이벤트 이름은 카멜 표기법으로 작성합니다. 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달합니다. DOM 요소에만 이벤트를 설정할 수 있습니다.

'DOM을 꼭 직접적으로 건드려야 할 때'입니다. 앞 예제에서는 state를 사용하여 우리에게 필요한 기능을 구현했지만, 가끔 state만으로 해결할 수 없는 기능이 있습니다. 어떤 상황인지 알아볼까요?1)특정 input에 포커스 주기2)스크롤 박스 조작하기3)Canv

이 함수의 파라미터는 다음과 같습니다.1)callback: 새로운 배열의 요소를 생성하는 함수로 파라미터는 다음 세가지 입니다. 1-1 currentValue: 현재 처리하고 있는 요소 1-2 index: 현재 처리하고 있는 요소의 index

모든 리액트 컴포넌트에는 라이스사이클(수명주기)이 존재합니다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝납니다.참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용할 수 있습니다.라이프사이클 메서드의 종류는 총 아홉

Hooks는 함수형 컴포넌트에서도 상태 관리를 할 수 잇는 useState, 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공하여 기존의 함수형 컴포넌트에서 할 수 없었던 다양한 작업을 할 수 있게 해 줍니다.useState는 가장 기본적인 Hook이며,

여기서 useState(createBulkTodos())라고 작성하면 리렌더링될 때마다 createBulkTodos 함수가 호출되지만, useState(createBulkTodos)처럼 파라미터를 함수 형태로 넣어 주면 컴포넌트가 처음 렌더링될 때만 createBulk

immer를 사용하면 불변성ㅇ르 유지하는 작업을 매우 간단하게 처리할 수 있습니다. 이 라이브러리의 사용법은 다음과 같습니다.produce라는 함수는 두 가지 파라미터를 받습니다. 첫 번째 파라미터는 수정하고 싶은 상태이고, 두 번째 파라미터는 상태를 어떻게 업데이트할

SPA는 Single Page Application(싱글 페이지 애플리케이션)의 약어입니다. 말 그대로 한 개의 페이지로 이루어진 애플리케이션이라는 의미입니다. 전통적인 웹 페이지는 다음과 같이 여러 페이지로 구성되어 있습니다.Link 컴포넌트는 클릭하면 다른 주소로

리덕스는 가장 많이 사용하는 리액트 상태 관리 라이브러입니다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 더욱 효율적으로 관리할 수 있습니다.상태에 어떠한 변화가 필요하면 액션(action)이란 것이 발생합니다. 이는 하낭의 객체로