dev
-
[18]"key"는 무엇이며 사용할 때의 이점은 무엇인가?dev/Web 2021. 4. 12. 20:08
key는 고유한 값으로 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. key를 이용해 React는 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다. 데이터 ID를 키로 사용하는 경우가 가장 많다. 렌더링된 아이템에 대한 안정적인 ID가 없는 경우, 아이템 인덱스를 키로 사용할 수 있다.
-
[14]JSX 콜백에서 메서드 또는 이벤트 핸들러를 바인딩하는 방법dev/Web 2021. 4. 12. 19:06
3가지 방법이 존재한다. 1. Constructor에서 바인딩을 한다. class Component extends React.Component { constructor(props) { super(props) this.handleClick = this.handleClick.bind(this) } handleClick() { // ... } } 2. Public Class 필드 문법 - this를 사용해 바인딩 한다. handleClick = () => { console.log('this is:', this) } {'Click me'} 3. 화살표 함수를 사용한다. this.handleClick(event)}> {'Click me'}
-
[13]HTML과 React 이벤트 처리의 차이점dev/Web 2021. 4. 12. 19:05
HTML 이벤트의 이름은 소문자이다. React에서는 이벤트 이름에 camelCase를 사용한다. HTML에서는 prevent default behavior에 false를 반환할 수 있다. React에서는 명시적으로 preventDefault()를 사용한다. function handleClick(event) { event.preventDefault() console.log('The link was clicked.') } HTML에서는 이벤트에서 함수를 호출할때 위처럼 ()를 사용하지만 React에서는 ()를 사용하지 않는다.