리액트

이 글은 인프런 처음만난리액트를 보고 정리한 글입니다.리액트 사용할때 필수.JSX? A sysntax extension to JavaScript. 자바스크립트의 확장 문법.js의 문법을 확장시킨거.문법을 어떤식으로 확장? js + xml/html (jsx의 x는 xml

Elements : 리액트 앱을 구성하는 요소이다.엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들. 즉, 리액트 앱을 구성하는 가장 작은 블록들을 엘리먼트라고 부르는 것.리액트돔에 대해서 살펴보자.실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM엘리먼트가 되는 것이고

출처 | 인프런 : 처음만난리액트 강의를 정리한 글입니다.리액트는 컴포넌트 기반이다. 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고 또 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다.하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있고, 유

State 렌더링이나 데이터 흐름에 사용되는 값만 State에 포함시켜야한다. State가 변경될 경우 컴포넌트가 재랜더링 되기 떄문에 렌더링과 데이터흐름 관련 없는 값은 성능을 저하시킬 수 있음 State는 JavaScript 객체이다. 직접 수정할 수

함수Component가 Class Component의 기능을 동일하게 구현할 수 있도록 등장한 것이 Hooks이다. 1, 앞에 use를 붙여서 Hooks 기능임을 표시한다. UseState() state라는 것을 사용하기 위한 Hook이다. 함수 컴포넌트에서

UseMemo란?Memoized value를 리턴하는 Hook이다. Memoization이란? : 최적화를 위해서 사용한다.정리하면, 연산량이 많이 드는 함수의 호출결과를 저장해 두었다가 같은 입력값으로 함수를 호출하면 새로 함수를 호출하지 않고 이전에 저장해 놨던 호

Hook은 컴포넌트가 렌더링 될 때 마다 매번 같은 순서로 호출되어야한다.이렇게 쓰면 안 된다.렌더링 할 때마다 Hook과 같은 순서대로 호출되는 것이 아니라, 조건문의 결과에 따라 호출되는 hook이 달라진다.hook은 꼭 최상위 레벨에서만 호출해야 한다.정리이름이

DOM의 Event DOM에서는 클릭 이벤트를 처리할 함수를 onclick를 통해서 전달한다.(소문자)C가 대문자로 이루어져있음 DOM에서는 이벤트를 처리할 함수를 문자열로 전달하지만, 리액트에선 함수로 전달한다. (표기법과 함수전달 방식이 다르다)이벤트 리스너라고도