Virtual DOM리액트는 프레임워크가 아니라 라이브러리 - View만 담당한다. 다른 웹 프레임워크가 Ajax, 데이터 모델링, 라우팅 등과 같은 기능을 내장하고 있지만, 리액트는 정말 뷰만 신경쓰는 라이브러리이므로 기타 기능은 직접 구현하여 사용해야 한다.Node
react 모듈을 import 구문을 통해 불러와서 사용한다.대표적인 번들러로 웹팩이 있다.번들러 도구를 사용하면 import로 모듈을 불러왔을 때 불러온 모듈을 모두 합쳐서 하나의 파일을 생성해 준다.웹팩을 사용하면 SVG 파일과 CSS 파일도 불러올 수 있다.자바스
JSX 보트는 브라우저에서 실행되기 전에 코드가 번들링 되는 과정에서 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.보기 쉽고 익숙하다. html 코드와 비슷하다.더욱 높은 활용도 컴포넌트를 JSX 안에서 작성할 수 있다.감싸인 요소컴포넌트에 여러 요소가
클래스형 컴포는터의 경우 함수형 컴포넌트와는 다르게 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것!클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.함수형
컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이며, 컴포넌트 자신은 해당 props를 읽기 전용으로만 사용할 수 있다. props를 바꾸려며 부모 컴포넌트에서 바꾸어 주어야 한다.App 컴포넌트에서는 My Component를 사용할 때 props를 바꾸어 주
이벤트 이름은 카멜 표기법으로 작성한다.onclick → onClick이벤트에 실행할 자바스크립트 코드를 전달한 것이 아니라, 함수 형태의 값을 전달한다.DOM 요소에만 이벤트를 설정할 수 있다.하지만 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는
\- HTML에서 id를 사용하여 DOM에 이름을 다는 것처럼 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법이 있다. → ref(reference)리액트 컴포넌트 안에서 id를 사용 못하는가?사용할 수는 있지만, 같은 컴포넌트를 여러 번 사용한다고 가성하면, HT
`` 태그가 반복된다. → 반복적인 내용을 효율적으로 보여 주고 관리하는 방법 배운다. 자바스크립트 배열의 map() 함수 자바스크립트 배열 객체의 내장 함수인 map 함수를 사용하여 반복되는 컴포넌트를 렌더링할 수 있다. map 함수는 파라미터로 전달된 함수를