React

props는 properties의 준표현으로 컴포넌트 속성을 설정할 때 사용하는 요소입니다.props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(여기서는 App.js)에서만 설정이 가능함.this키워드를 사용하여 props에 접근.App.js에서 props에

이벤트 이름은 camelCase로 작성.HTML의 onclick은 React에서 onClick으로 작성.onkeyup -> onKeyUp이벤트에 실행할 자바스크립트 코드를 전달하는 것이 아니라, 함수 형태의 값을 전달.HTML에서는 이벤트를 설정할 때 큰따옴표 안에 실

일반적인 HTML에서 DOM요소에 이름을 달 때는 id를 사용한다.그렇다면 리액트 프로젝트 내부에서는 DOM에 이름을 어떻게 달까? =>ref리액트 컴포넌트 안에서도 id를 사용할 수 있다고 한다. 그러나 HTML에서 DOM의 id는 유일해야 하는데, 이런 상황에서는

이러한 반복적인 내용을 효율적으로 관리하는 방법에 대해서 알아보자.자바스크립트 배열 객체의 내장 함수 map 함수를 사용하여 반복되는 컴포넌트를 렌더링한다.arr.map(callback,thisArg)callback : 새로운 배열의 요소를 생성하는 함수로 파라미터는

모든 리액트 컴포넌트에는 라이프사이클(LifeCycle)(수명 주기) 존재한다.Will 접두사 : 어떤 작업을 작동하기 전에 실행되는 메서드.Did 접두사 : 어떤 작업을 작동한 후에 실행되는 메서드.마운트, 업데이트, 언마운트의 카테고리로 나뉨.DOM이 생성되고 웹

🎁 yarn add node-sass sass loader를 설치해주어야 Sass를 사용이 가능하다.🧨주의 : Error: Node Sass version 5.0.0 is incompatible with ^4.0.0. 이러한 오류가 발생하면 Node Sass의 버전

create-react-app todolistyarn add sass-loader node-sass classnames오류 발생 시 sass의 버전 맞춰주기. uninstall -> install @~yarn add open-color메인 스타일 설정index.js,

(1)에서의 프로젝트는 기본 외관만 짠 상태로 빈 껍데기입니다.상태 관리를 통해 프로젝트를 실제로 작동시켜보겠습니다.state뿐 아니라 메서드를 사용할 때도 비구조화 할당을 이용.this.props, this를 참조하지 않아도 됨.

👍 프로젝트 최적화 방법\-> 프로젝트 규모가 커질수록 컴포넌트 리렌더링 최적화를 하지 않으면 리렌더링되는 과정에서 버퍼링이 발생할 수 있다.리액트에서는 부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됨.작은 프로젝트에서는 상관이 없으나, 규모가 커질수록 불필

리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리.지금까지의 상태 관리의 로직은 상태 관리를 쉽게 하기 위해 모두 App 컴포넌트에서 진행해왔음.App에서 모든 로직을 관리하고 있기 때문에 App 컴포넌트의 state를 업데이트하면 App 컴포

인터넷을 보며 공부하는 React 공부 노트

React 공부노트 2