Hi, there
key는 고유한 값으로 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. key를 이용해 React는 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다. 데이터 ID를 키로 사용하는 경우가 가장 많다. 렌더링된 아이템에 대한 안정적인 ID가 없는 경우, 아이템 인덱스를 키로 사용할 수 있다.
JSX에서 if-else 분기를 사용하기 위한 방법으로 JSX랜더때 분기를 줄 수 있다. Hello! { messages.length > 0 && !isLogin? You have {messages.length} unread messages. : You don't have unread messages. }
이벤트 핸들러는 모든 브라우저에서 이벤트를 동일하게 처리하기 위한 이벤트 래퍼 SyntheticEvent객체를 전달 받는다. 결국 크로스 브라우징을 위한 것 including stopPropagation() and preventDefault(), except the events work identically across all browsers.
화살표 함수를 이용해 파라미터를 전달할 수 있다. this.handleClick(id)} /> .bind를 사용 그외 handleClick = (id) => () => { console.log("Hello, your ticket number is", id) };
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'}
리스트 : 콘텐츠가 있으면 최근 5건을 불러옵니다.
-
[18]"key"는 무엇이며 사용할 때의 이점은 무엇인가?Web 2021.04.12 20:08
key는 고유한 값으로 React가 어떤 항목을 변경, 추가 또는 삭제할지 식별하는 것을 돕는다. key는 엘리먼트에 안정적인 고유성을 부여하기 위해 배열 내부의 엘리먼트에 지정해야 한다. 자식들이 key를 가지고 있다면, React는 key를 통해 기존 트리와 이후 트리의 자식들이 일치하는지 확인한다. key를 이용해 React는 트리의 변환 작업이 효율적으로 수행되도록 수정할 수 있습니다. 데이터 ID를 키로 사용하는 경우가 가장 많다. 렌더링된 아이템에 대한 안정적인 ID가 없는 경우, 아이템 인덱스를 키로 사용할 수 있다.
-
[14]JSX 콜백에서 메서드 또는 이벤트 핸들러를 바인딩하는 방법Web 2021.04.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'}