리액트를 다루는 기술

리액트는 자바스크립트 라이브러리로 사용자 인터페이스를 만드는 데 사용View만 신경 쓰는 라이브러리리액트에서 특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트 라고 한다.사용자 화면에 뷰를 보여 주는 것을 렌더링이라고 한다. 렌더링에는 리액트 컴포넌트가 최초로 실행

JSX는 자바스크립트의 확장 문법이며 XML과 매우 비슷하게 생김JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.JSX로 작성된 코드 자바스크립트로 변환된 코드컴포넌트를 페이지에 렌더

컴포넌트 컴포넌트 선언 방식 1. 함수형 컴포넌트 클래스형 컴포넌트 클래스형 컴포넌트 props props는 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정한다. App컴포넌트(부모 컴포넌트)에

이벤트 이름은 카멜 표기법으로 작성 이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달DOM 요소에만 이벤트 설정 가능 div, button, input, form, span 등의 DOM 요소에는 이벤트를 설정할 수 있지만, 직접 만든

dfd

arr.map(callback, \[thisArg])callback: 새로운 배열의 요소를 생성하는 함수currentValue: 현재 처리하고 있는 요소index: 현재 처리하고 있는 요소의 index값array: 현재 처리하고 있는 원본 매열thisArg(선택): c

모든 리액트 컴포넌트에는 라이프사이클(수명 주기)이 존재한다. 컴포넌트의 수명은 페이지에 렌더링되기 전인 준비 과정에서 시작하여 페이지에서 사라질 때 끝난다.라이프사이클 메서드는 클래스형 컴포넌트에서만 사용 가능하다. 함수형 컴포넌트에서는 Hooks 기능을 사용해 비슷

함수형 컴포넌트에서 상태 관리하기const \[상태 값, 상태설정 함수] = useState(기본값);useState 함수의 파라미터에는 상태의 기본값을 넣어 준다. 이 함수가 호출되면 배열을 반환하고, 배열의 첫 번째 원소는 상태 값, 두 번째 원소는 상태를 설정하는

일반 CSSSassCSS Modulestyled-componentsCSS를 작성할 때 가장 중요한 점은 CSS 클래스를 중복되지 않게 만드는 것이다. 중복을 방지하는 방식 두 가지1\. 이름 짓는 규칙2\. CSS SelectorSass(Syntactically Awe

CSS Module > CSS를 불러와서 사용할 때 클래스 이름을 고유한 값, 즉 [파일 이름][클래스 이름]_[해시값] 형태로 자동으로 만들어서 컴포넌트 스타일 클래스 이름이 중첩되는 현상을 방지해 주는 기술 .module.css 확장자로 파일을 저장하기만 하면 C

$ npx create-react-app todo-app 로 프로젝트를 생성한 후 todo-app 디렉터리로 들어가서 필요한 라이브러리를 설치한다.$ npm install node-ass classnames react-icons프로젝트 최상위 디렉터리에 .prettie

나중에 추가할 일정 항목에 대한 상태들은 모두 App 컴포넌트에서 관리한다.App에서 useState를 사용해 todos라는 상태를 정의하고, todos를 TodoList의 props로 전달한다.todos 배열 안에 있는 객체에는 각 항목의 고유 id, 내용, 완료 여

많은 데이터 렌더링하기 앞 10장에서 만든 애플리케이션은 추가되어 있는 데이터가 적기 때문에 사용할 때 불편하지 않다. 하지만 데이터가 무수히 많아지면, 애플리케이션이 느려지는 것을 체감할 수 있을 정도로 지연이 발생한다. App 컴포넌트에서 많은 데이터를 렌더링해 보

전개 연산자와 배열의 내장 함수를 사용하면 간단하게 배열 혹은 객체를 복사하고 새로운 값을 덮어 쓸 수 있다. 하지만 객체의 구조가 깊어지면 불변성을 유지하면서 업데이트하는 것이 힘들어진다.\-> 이럴 때 immer 라이브러리를 사용하면 구조가 복잡한 객체도 쉽고 짧은