1. DOM의 이벤트 DOM에서는 클릭 이벤트를 처리할 함수를 onclick을 통해 전달시킴 Activate 위 코드는 버튼이 눌리면 activate()라는 함수를 호출하도록 되어 있다 2. 리액트에서 이벤트 onclick 대신 onClick으로 카멜 표기법 DOM에서는 이벤트 처리 함수를 문자열 그대로 전달하지만, 리액트에서는 {}를 사용해서 함수 그대로 전달 Activate 3. 이벤트 핸들러 어떤 이벤트가 발생했을 때 해당 이벤트를 처리하는 함수 혹은 이벤트가 발생하는 것을 계속 듣고 있는다는 의미로 이벤트 리스너(event listener)라고도 부름 class Toggle extends React.Component { constructor(props){ super(props); this.stat..
1. 훅이란 무엇인가 클래스 컴포넌트에서는 생성자 constructor에서 state를 정의하고 setState() 함수를 통해 state를 업데이트한다. 이처럼 클래스 컴포넌트는 state와 관련된 기능뿐만 아니라 컴포넌트의 생명주기 함수들까지 모두 명확하게 정의되어 있어서 잘 가져다 쓰기만 하면 된다 하지만 함수 컴포넌트는 클래스 컴포넌트와는 다르게 코드도 굉장히 간결하며, 별도로 state를 정의해서 사용하거나, 컴포넌트의 생명주기에 맞춰 어떤 코드가 실행되도록 할 수 없었다 그래서 함수 컴포넌트에 이런 기능을 지원하기 위해 만든것이 훅이다. 훅을 사용해서 함수 컴포넌트도 클래스 컴포넌트의 기능을 모두 동일하게 구현할 수 있게 된다. Hook이라는 영단어는 갈고리라는 뜻을 갖는다. 프로그래밍에서는 ..
1. 컴포넌트 기반의 구조 리액트에서는 모든 페이지가 컴포넌트로 구성되어 있고, 하나의 컴포넌트는 또 다른 여러 개의 컴포넌트의 조합으로 구성될 수 있다. 이러한 컴포넌트들을 마치 레고 블록을 조립하듯이 끼워 맞춰서 새로운 컴포넌트를 만들 수 있다 에어비앤비 웹사이트 화면을 캡쳐하고 컴포넌트를 간단히 표시한 것이다. A, B로 표시된 부분이 리액트 컴포넌트이다. 이러한 컴포넌트를 여러 번 반복적으로 사용해서 하나의 페이지를 구성하고 있다. 이처럼 리액트는 작은 컴포넌트들이 모여서 하나의 컴포넌트를 구성하고, 이러한 컴포넌트들이 모여서 전체 페이지를 구성한다. 이렇게 하나의 컴포넌트를 반복적으로 사용함으로써 전체 코드의 양이 줄어 자연스레 개발 시간과 유지 보수 비용도 줄일 수 있다. 2. 리액트 컴포넌트..
1. element의 정의 리액트 앱을 구성하는 요소 Elements are the smallest building blocks of React apps "엘리먼트는 리액트 앱의 가장 작은 빌딩 블록들" 개발자 도구에서 볼 수 있는 elements 탭의 elements는 DOM element이고, HTML의 요소이다. 실제로 화면에서 볼 수 있는 것들 그러면 react element는..? 리액트 초창기에는 "화면에 나타나는 내용을 기술한 자바스크립트 객체"를 나타냈다고 한다 실제 브라우저의 DOM에 존재하는 엘리먼트는 DOM 엘리먼트가 되고, 리액트의 Virtual DOM에 존재하는 엘리먼트가 리액트 엘리먼트가 된다 리액트 엘리먼트는 DOM 엘리먼트의 가상 표현이 된다 DOM 엘리먼트는 리액트 엘리먼트..
딥러닝/머신러닝, 통계학, IT프로그래밍, 알고리즘을 좋아하는 사람 https://github.com/yundaehyuck
